/* ============================================================
   SOS Boîte aux Lettres — main.css
   Identité monospace #002b6b / #ffcd00 (bleu La Poste)
   Consolidée depuis html/{index,page-dept-92,page-ville-boulogne,
   service-ouverture-urgence}.html
   ============================================================ */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace;
    font-size: 15px;
    line-height: 1.6;
    color: #002b6b;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

:root {
    --black: #002b6b;
    --yellow: #ffcd00;
    --yellow-hover: #ffd633;
    --yellow-soft: #fff5b3;
    --gray-bg: #f4f4f0;
    --gray-2: #e8e8e0;
    --green: #0a8b3e;
    --red: #d63031;
    --line: #002b6b;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* SKIP LINK */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--black); color: var(--yellow);
    padding: 12px 18px; font-weight: 900; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* CONTAINER + SECTION */
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.section { padding: 60px 0; border-top: 3px solid var(--black); }
.section-eyebrow {
    display: inline-block; background: var(--black); color: var(--yellow);
    padding: 5px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    margin-bottom: 18px;
}
.section-title {
    font-size: 2.4rem; font-weight: 900; line-height: 1;
    text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 24px;
    color: var(--black);
}
.section-title em { background: var(--yellow); font-style: normal; padding: 0 8px; display: inline-block; }
.section-intro { max-width: 780px; margin-bottom: 40px; font-size: .96rem; line-height: 1.65; color: #222; }
.section-intro strong { font-weight: 900; background: var(--yellow); padding: 1px 4px; }

/* HEADER */
.header {
    background: var(--yellow); position: sticky; top: 0; z-index: 100;
    border-bottom: 3px solid var(--black);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; max-width: 1280px; margin: 0 auto;
}
.logo {
    display: flex; align-items: center; gap: 12px;
    font-weight: 900; text-transform: uppercase; font-size: .95rem; letter-spacing: -.01em;
}
.logo-tag {
    background: var(--black); color: var(--yellow);
    padding: 4px 8px; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
}
.header-right { display: flex; align-items: center; gap: 14px; }
.header-status {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
}
.status-dot {
    width: 10px; height: 10px; background: var(--green);
    border: 2px solid var(--black); border-radius: 50%;
    animation: blink 1.5s ease-in-out infinite;
}
.header-phone {
    background: var(--black); color: var(--yellow);
    padding: 11px 18px; font-weight: 900; font-size: .92rem;
    letter-spacing: .02em; border: 3px solid var(--black);
    box-shadow: 4px 4px 0 var(--black);
    transition: transform .1s, box-shadow .1s;
}
.header-phone:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
@media (max-width: 768px) {
    .header-status { display: none; }
    .header-phone { padding: 8px 12px; font-size: .85rem; box-shadow: 3px 3px 0 var(--black); }
}

/* BREADCRUMB */
.breadcrumb {
    background: var(--gray-bg); padding: 14px 0; border-bottom: 3px solid var(--black);
    font-size: .82rem; font-weight: 600;
}
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #444; }
.breadcrumb-list a:hover { background: var(--yellow); padding: 2px 6px; margin: -2px -6px; color: var(--black); }
.breadcrumb-sep { color: #888; }
.breadcrumb-list .current { color: var(--black); font-weight: 900; }

/* LIVE BANNER (page-detail/ville) */
.live-banner {
    background: var(--green); color: #fff; padding: 10px 0;
    border-bottom: 3px solid var(--black); font-size: .85rem; font-weight: 700;
}
.live-banner-inner {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    flex-wrap: wrap; text-align: center;
}
.live-pill {
    background: #002b6b; color: #fff; padding: 3px 10px;
    font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
}
.live-pill::before {
    content: ""; width: 8px; height: 8px; background: var(--yellow);
    border-radius: 50%; animation: blink 1.2s ease-in-out infinite;
}
.live-banner strong { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 600px) { .live-banner-inner { font-size: .78rem; gap: 8px; } }

/* HERO */
.hero {
    background: var(--yellow); padding: 50px 0 60px;
    border-bottom: 3px solid var(--black); position: relative; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.hero-tag {
    display: inline-block; background: var(--black); color: var(--yellow);
    padding: 6px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
    margin-bottom: 20px; text-transform: uppercase;
}
.hero h1 {
    font-size: 3.6rem; font-weight: 900; line-height: .95;
    text-transform: uppercase; letter-spacing: -.04em; margin-bottom: 24px;
    color: var(--black);
}
.hero h1 .strike, .hero h1 .city, .hero h1 .dept, .hero h1 .highlight {
    background: var(--black); color: var(--yellow);
    padding: 0 10px; display: inline-block;
}
.hero-postal {
    display: inline-block; background: #fff; border: 3px solid var(--black);
    padding: 4px 12px; font-size: .85rem; font-weight: 900; letter-spacing: .08em;
    margin-bottom: 20px;
}
.hero-subtitle {
    font-size: 1.05rem; color: var(--black); margin-bottom: 28px;
    max-width: 620px; font-weight: 500; line-height: 1.55;
}
.hero-cities-preview { font-size: .85rem; color: #333; margin-bottom: 28px; font-weight: 500; line-height: 1.55; }
.hero-cities-preview strong { font-weight: 900; text-transform: uppercase; }

.hero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin-bottom: 28px; border: 3px solid var(--black); background: #fff;
}
.hero-stat { padding: 14px 16px; border-right: 3px solid var(--black); }
.hero-stat:last-child { border-right: none; }
.hero-stat strong {
    display: block; font-size: 1.5rem; font-weight: 900; line-height: 1;
    margin-bottom: 3px; letter-spacing: -.02em;
}
.hero-stat span {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #444; line-height: 1.2; display: block;
}

.hero-key-stat {
    background: #fff; border: 3px solid var(--black);
    padding: 18px 22px; margin-bottom: 24px;
    display: flex; align-items: center; gap: 18px;
    box-shadow: 5px 5px 0 var(--black);
}
.hero-key-stat-num {
    font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -.04em;
    background: var(--yellow); padding: 6px 14px; border: 3px solid var(--black);
}
.hero-key-stat-text { font-size: .95rem; line-height: 1.4; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.hero-key-stat-text strong { display: block; font-size: 1.1rem; font-weight: 900; }

.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 20px; }
.cta-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--black); color: var(--yellow);
    padding: 18px 28px; font-weight: 900; font-size: 1.05rem;
    letter-spacing: .02em; text-transform: uppercase;
    border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--black);
    transition: transform .12s, box-shadow .12s;
}
.cta-primary:hover {
    transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--black);
    background: var(--yellow); color: var(--black);
}
.cta-secondary {
    display: inline-block; color: var(--black);
    padding: 14px 0; font-size: .85rem; font-weight: 700;
    border-bottom: 3px solid var(--black); margin-top: 18px;
    text-transform: uppercase; letter-spacing: .05em;
}
.cta-secondary-text { font-size: .82rem; font-weight: 700; color: var(--black); }
.cta-secondary-text strong { font-weight: 900; }

.hero-quartiers {
    background: #fff; border: 3px solid var(--black); padding: 14px 18px;
    font-size: .85rem; line-height: 1.55;
}
.hero-quartiers strong { font-weight: 900; text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; display: block; margin-bottom: 6px; color: #666; }

/* HERO CARD (manifesto-card) */
.hero-card {
    background: var(--black); color: var(--yellow);
    padding: 32px 28px; border: 3px solid var(--black);
    box-shadow: 8px 8px 0 var(--yellow), 8px 8px 0 3px var(--black);
    position: relative;
}
.hero-card.light {
    background: #fff; color: var(--black);
    box-shadow: 8px 8px 0 var(--black);
}
.hero-card-flag {
    position: absolute; top: -3px; right: -3px;
    background: var(--green); color: #fff;
    padding: 6px 12px; font-size: .72rem; font-weight: 900;
    letter-spacing: .05em; text-transform: uppercase; border: 3px solid var(--black);
}
.hero-card-label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .15em; margin-bottom: 14px; color: #888;
}
.hero-card-title {
    font-size: 1.4rem; font-weight: 900; text-transform: uppercase;
    line-height: 1.1; margin-bottom: 20px;
}
.hero-card ul { margin-bottom: 0; }
.hero-card li {
    font-size: .85rem; padding: 10px 0; border-bottom: 1px solid #444;
    display: flex; align-items: center; gap: 12px;
}
.hero-card.light li { border-bottom: 2px dashed #ddd; justify-content: space-between; font-weight: 600; }
.hero-card li:last-child { border-bottom: none; }
.hero-card li::before { content: "▶"; color: var(--yellow); font-size: .7rem; }
.hero-card.light li::before { display: none; }
.hero-card.light li span:first-child::before { content: "✓ "; color: var(--green); font-weight: 900; font-size: 1rem; }
.hero-card li.crossed { color: #888; text-decoration: line-through; text-decoration-color: #ff4444; text-decoration-thickness: 2px; }
.hero-card li.crossed::before { content: "✕"; color: #ff4444; }
.hero-card.light li strong {
    background: var(--yellow); padding: 1px 8px;
    font-size: .82rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: -.01em; white-space: nowrap;
}

/* HERO ACTIVITY (page-detail) */
.hero-activity { background: #fff; border: 3px solid var(--black); box-shadow: 8px 8px 0 var(--black); }
.hero-activity-head {
    background: var(--black); color: var(--yellow);
    padding: 14px 18px; display: flex; justify-content: space-between; align-items: center;
}
.hero-activity-head strong { font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.live-pill-mini {
    background: var(--green); color: #fff; padding: 3px 8px;
    font-size: .68rem; font-weight: 900; letter-spacing: .05em;
    display: inline-flex; align-items: center; gap: 5px;
}
.live-pill-mini::before { content: ""; width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: blink 1.2s ease-in-out infinite; }
.hero-activity-list { padding: 0; }
.activity-item {
    padding: 14px 18px; border-bottom: 2px dashed #ddd;
    display: flex; flex-direction: column; gap: 4px;
}
.activity-item:last-child { border-bottom: none; }
.activity-time {
    font-size: .7rem; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    display: flex; justify-content: space-between; align-items: center;
}
.activity-time .status-tag { font-size: .65rem; padding: 2px 6px; font-weight: 900; }
.status-tag.done { background: var(--green); color: #fff; }
.status-tag.now { background: var(--red); color: #fff; animation: blink 1.5s ease-in-out infinite; }
.activity-title { font-size: .88rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.2; }
.activity-detail { font-size: .78rem; color: #444; font-weight: 500; }

@media (max-width: 900px) {
    .hero h1 { font-size: 2.4rem; }
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-card { box-shadow: 5px 5px 0 var(--yellow), 5px 5px 0 3px var(--black); }
    .hero-card.light { box-shadow: 5px 5px 0 var(--black); }
    .hero-key-stat-num { font-size: 2.2rem; }
}

/* MANIFESTO BAR */
.manifesto { background: var(--black); color: var(--yellow); padding: 24px 0; }
.manifesto-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: center; }
.manifesto-item { padding: 8px 16px; border-right: 1px solid #333; }
.manifesto-item:last-child { border-right: none; }
.manifesto-item strong {
    display: block; font-size: 1.6rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: -.01em; line-height: 1; margin-bottom: 6px;
}
.manifesto-item span { font-size: .78rem; color: #aaa; font-weight: 500; }
@media (max-width: 768px) {
    .manifesto-inner { grid-template-columns: 1fr; gap: 18px; }
    .manifesto-item { border-right: none; border-bottom: 1px solid #333; padding-bottom: 18px; }
    .manifesto-item:last-child { border-bottom: none; }
}

/* MANIFESTO LONG (claims réfutables — section dédiée) */
.manifesto-long { background: var(--gray-bg); }
.manifesto-claims {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
    border: 3px solid var(--black); background: #fff;
}
.manifesto-claim {
    padding: 24px 26px; border-right: 3px solid var(--black); border-bottom: 3px solid var(--black);
    display: flex; flex-direction: column; gap: 10px;
}
.manifesto-claim:nth-child(2n) { border-right: none; }
.manifesto-claims .manifesto-claim:nth-last-child(-n+2) { border-bottom: none; }
.manifesto-claim-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--black); color: var(--yellow); padding: 4px 10px;
    font-size: .7rem; font-weight: 900; letter-spacing: .08em;
    text-transform: uppercase; align-self: flex-start;
}
.manifesto-claim-tag::before { content: "✓"; color: var(--yellow); }
.manifesto-claim h3 {
    font-size: 1.05rem; font-weight: 900; text-transform: uppercase;
    line-height: 1.2; letter-spacing: -.01em;
}
.manifesto-claim p { font-size: .88rem; line-height: 1.6; color: #222; font-weight: 500; }
@media (max-width: 768px) {
    .manifesto-claims { grid-template-columns: 1fr; }
    .manifesto-claim { border-right: none !important; border-bottom: 3px solid var(--black) !important; }
    .manifesto-claims .manifesto-claim:last-child { border-bottom: none !important; }
}

/* SERVICES */
.services-grid {
    display: grid; grid-template-columns: repeat(var(--svc-cols, 4), 1fr); gap: 0;
    border: 3px solid var(--black);
}
.service-card {
    padding: 30px 24px; border-right: 3px solid var(--black);
    display: flex; flex-direction: column; background: #fff;
    transition: background .15s;
}
.service-card:last-child { border-right: none; }
.service-card:hover { background: var(--yellow); }
.service-num { font-size: .85rem; font-weight: 700; color: #888; margin-bottom: 12px; letter-spacing: .05em; }
.service-card h3 {
    font-size: 1.15rem; font-weight: 900; text-transform: uppercase;
    line-height: 1.15; margin-bottom: 14px; letter-spacing: -.01em;
}
.service-card p { font-size: .85rem; color: #222; flex-grow: 1; margin-bottom: 18px; line-height: 1.5; }
.service-price-block { background: var(--black); color: var(--yellow); padding: 12px; margin-bottom: 14px; text-align: center; }
.service-price-block strong { font-size: 1.5rem; font-weight: 900; display: block; line-height: 1; }
.service-price-block span { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.service-cta {
    display: block; background: var(--yellow); color: var(--black);
    padding: 11px; text-align: center; font-weight: 900; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .05em; border: 2px solid var(--black);
}
.service-card:hover .service-cta { background: var(--black); color: var(--yellow); }
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card { border-right: none; border-bottom: 3px solid var(--black); }
    .service-card:nth-child(odd) { border-right: 3px solid var(--black); }
    .service-card:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 520px) {
    .services-grid { grid-template-columns: 1fr; }
    .service-card { border-right: none !important; }
    .service-card:not(:last-child) { border-bottom: 3px solid var(--black); }
}

/* PRICE TABLE (tarifs détaillés — grid 3×2 pour 6 cartes BAL) */
.pricing { background: #fff; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 3px solid var(--black); }
.pricing-card {
    padding: 32px 28px; border-right: 3px solid var(--black);
    background: #fff; display: flex; flex-direction: column;
    transition: background .15s;
}
/* Reset bordures (ré-appliquées par les sélecteurs ci-dessous) */
.pricing-card { border-bottom: 0; }
/* 3 colonnes : pas de border-right sur la 3e/6e */
.pricing-card:nth-child(3n) { border-right: none; }
/* Top row (1,2,3) : border-bottom */
.pricing-card:nth-child(-n+3) { border-bottom: 3px solid var(--black); }
.pricing-card:hover { background: var(--yellow); }
/* Carte mise en avant (premier item, identité visuelle jaune) */
.pricing-card--featured { background: var(--yellow); }
.pricing-card--featured .pricing-includes { background: #fff; }
.pricing-card--featured .pricing-cta { background: var(--black); color: var(--yellow); }
.pricing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.pricing-info { flex-grow: 1; }
.pricing-num {
    display: inline-block; background: var(--black); color: var(--yellow);
    padding: 3px 9px; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
    margin-bottom: 10px;
}
.pricing-card h3 {
    font-size: 1.3rem; font-weight: 900; text-transform: uppercase;
    line-height: 1.1; letter-spacing: -.01em; margin-bottom: 12px;
}
.pricing-card p { font-size: .88rem; color: #222; line-height: 1.55; margin-bottom: 16px; }
.pricing-includes {
    background: var(--gray-bg); border: 2px solid var(--black);
    padding: 12px 14px; margin-bottom: 16px; font-size: .82rem;
}
.pricing-card:hover .pricing-includes { background: #fff; }
.pricing-includes strong {
    display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 900; margin-bottom: 6px; color: #555;
}
.pricing-includes ul li { padding: 2px 0; display: flex; align-items: flex-start; gap: 8px; font-weight: 500; }
.pricing-includes ul li::before { content: "✓"; color: var(--green); font-weight: 900; flex-shrink: 0; }
.pricing-price-block {
    background: var(--black); color: var(--yellow);
    padding: 16px; text-align: center; flex-shrink: 0; min-width: 120px;
}
.pricing-price-block strong { font-size: 1.8rem; font-weight: 900; display: block; line-height: 1; letter-spacing: -.02em; }
.pricing-price-block span { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: #aaa; margin-top: 3px; display: block; }
.pricing-cta {
    display: block; background: var(--yellow); color: var(--black);
    padding: 13px; text-align: center; font-weight: 900; font-size: .88rem;
    text-transform: uppercase; letter-spacing: .05em; border: 2px solid var(--black);
    margin-top: auto;
}
.pricing-card:hover .pricing-cta { background: var(--black); color: var(--yellow); }
/* Tablette : 2 colonnes (3×2 → 2×3) */
@media (max-width: 1100px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-card { border-right: 3px solid var(--black); border-bottom: 0; }
    .pricing-card:nth-child(3n) { border-right: 3px solid var(--black); }
    .pricing-card:nth-child(2n) { border-right: none; }
    .pricing-card:not(:nth-last-child(-n+2)) { border-bottom: 3px solid var(--black); }
}
/* Mobile : 1 colonne */
@media (max-width: 700px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-card { border-right: none !important; border-bottom: 3px solid var(--black) !important; }
    .pricing-card:last-child { border-bottom: none !important; }
    .pricing-head { flex-direction: column; gap: 14px; }
    .pricing-price-block { width: 100%; }
}
.pricing-disclaimer {
    margin-top: 30px; padding: 22px; background: var(--yellow-soft); border: 3px solid var(--black);
}
.pricing-disclaimer h4 {
    font-size: .95rem; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; letter-spacing: -.01em;
}
.pricing-disclaimer p { font-size: .88rem; color: #222; line-height: 1.6; }

/* PRICING DETAIL (service page) */
.pricing-detail { background: var(--yellow); }
.pricing-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.pricing-main-card {
    background: var(--black); color: var(--yellow);
    border: 3px solid var(--black); padding: 0;
    box-shadow: 8px 8px 0 var(--black);
    display: flex; flex-direction: column;
}
.pricing-main-head { padding: 24px 28px; border-bottom: 3px solid var(--yellow); }
.pricing-main-head .label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: #aaa; margin-bottom: 6px; text-transform: uppercase; }
.pricing-main-head h3 { font-size: 1.4rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.15; }
.pricing-main-amount { padding: 30px 28px; text-align: center; border-bottom: 3px solid var(--yellow); }
.pricing-main-amount strong { font-size: 4rem; font-weight: 900; line-height: 1; letter-spacing: -.04em; display: block; }
.pricing-main-amount span { font-size: .85rem; font-weight: 700; letter-spacing: .05em; color: #aaa; display: block; margin-top: 6px; text-transform: uppercase; }
.pricing-main-includes { padding: 24px 28px; flex-grow: 1; }
.pricing-main-includes-title { font-size: .78rem; font-weight: 900; letter-spacing: .1em; color: #888; margin-bottom: 12px; text-transform: uppercase; }
.pricing-main-includes ul li { padding: 8px 0; font-size: .88rem; display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.pricing-main-includes ul li::before { content: "✓"; color: var(--yellow); font-weight: 900; flex-shrink: 0; }
.pricing-main-cta {
    background: var(--yellow); color: var(--black);
    padding: 18px; text-align: center; font-weight: 900; font-size: 1rem;
    letter-spacing: .02em; text-transform: uppercase;
    border-top: 3px solid var(--yellow); display: block; transition: background .15s;
}
.pricing-main-cta:hover { background: #fff; }
.pricing-extras { display: flex; flex-direction: column; gap: 20px; }
.pricing-extra-card { background: #fff; border: 3px solid var(--black); padding: 20px 24px; }
.pricing-extra-card h4 {
    font-size: .95rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em;
    margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.pricing-extra-card h4::before {
    content: ""; width: 20px; height: 20px; background: var(--green); border: 2px solid var(--black);
}
.pricing-extra-card.warning h4::before { background: var(--red); }
.pricing-extra-card ul li { padding: 6px 0; font-size: .87rem; line-height: 1.55; display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.pricing-extra-card ul li::before { content: "▶"; color: var(--green); font-size: .65rem; flex-shrink: 0; padding-top: 6px; font-weight: 900; }
.pricing-extra-card.warning ul li::before { color: var(--red); }
.pricing-extra-card p { font-size: .87rem; line-height: 1.55; font-weight: 500; }
@media (max-width: 900px) { .pricing-detail-layout { grid-template-columns: 1fr; } }

/* PROCESS */
.process { background: var(--gray-bg); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 3px solid var(--black); background: #fff; }
.process-step { padding: 28px 22px; border-right: 3px solid var(--black); position: relative; }
.process-step:last-child { border-right: none; }
.process-step::after {
    content: "→"; position: absolute; right: -15px; top: 50%;
    transform: translateY(-50%); font-size: 1.4rem; font-weight: 900;
    background: #fff; padding: 0 4px; z-index: 2;
}
.process-step:last-child::after { display: none; }
.process-num {
    font-size: 3rem; font-weight: 900; line-height: 1;
    background: var(--yellow); display: inline-block; padding: 0 10px; margin-bottom: 10px;
}
.process-step h3 { font-size: 1rem; font-weight: 900; text-transform: uppercase; margin-bottom: 6px; }
.process-step p { font-size: .85rem; color: #333; }
@media (max-width: 768px) {
    .process-grid { grid-template-columns: 1fr; }
    .process-step { border-right: none; border-bottom: 3px solid var(--black); }
    .process-step:last-child { border-bottom: none; }
    .process-step::after { display: none; }
}

/* GUARANTEES BAR */
.guarantees { background: var(--black); color: #fff; padding: 30px 0; }
.guarantees-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.guarantee { padding: 8px 22px; border-right: 1px solid #333; display: flex; align-items: center; gap: 14px; }
.guarantee:last-child { border-right: none; }
.guarantee-icon {
    width: 42px; height: 42px; background: var(--yellow); color: var(--black);
    display: grid; place-items: center; font-weight: 900; font-size: 1.2rem;
    flex-shrink: 0; border: 2px solid var(--yellow);
}
.guarantee-text strong {
    display: block; font-size: .95rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: -.01em; margin-bottom: 2px; line-height: 1.1;
}
.guarantee-text span { font-size: .78rem; color: #aaa; font-weight: 500; }
@media (max-width: 900px) {
    .guarantees-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .guarantee { border-right: none; padding: 8px 0; }
}
@media (max-width: 520px) { .guarantees-grid { grid-template-columns: 1fr; gap: 14px; } }

/* ZONES */
.zones-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 3px solid var(--black); }
.zone-dept { border-right: 3px solid var(--black); border-bottom: 3px solid var(--black); background: #fff; }
.zone-dept:nth-child(2n) { border-right: none; }
.zone-dept:nth-last-child(-n+2) { border-bottom: none; }
.zone-dept summary {
    padding: 18px 22px; font-weight: 900; text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; list-style: none; font-size: .9rem; letter-spacing: -.01em;
    transition: background .15s;
}
.zone-dept summary::-webkit-details-marker { display: none; }
.zone-dept summary:hover { background: var(--yellow); }
.zone-dept[open] summary { background: var(--black); color: var(--yellow); }
.zone-dept summary::after { content: "[+]"; font-size: .85rem; }
.zone-dept[open] summary::after { content: "[−]"; }
.zone-code {
    background: var(--black); color: var(--yellow);
    padding: 2px 8px; margin-right: 10px; font-size: .78rem;
}
.zone-dept[open] .zone-code { background: var(--yellow); color: var(--black); }
.zone-cities {
    padding: 18px 22px; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px;
    background: var(--gray-bg); border-top: 3px solid var(--black);
}
.zone-cities a { font-size: .85rem; font-weight: 500; color: var(--black); padding: 3px 0; }
.zone-cities a:hover { background: var(--yellow); padding-left: 6px; margin-left: -6px; }
@media (max-width: 768px) {
    .zones-grid { grid-template-columns: 1fr; }
    .zone-dept { border-right: none; }
    .zone-dept:nth-last-child(-n+2) { border-bottom: 3px solid var(--black); }
    .zone-dept:last-child { border-bottom: none; }
    .zone-cities { grid-template-columns: repeat(2, 1fr); }
}

/* CITIES GRID (page-list) */
.cities-section { background: #fff; }
.cities-intro { margin-bottom: 36px; font-size: .96rem; line-height: 1.7; color: #222; max-width: 820px; }
.cities-intro strong { font-weight: 900; background: var(--yellow); padding: 1px 6px; }
.cities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 3px solid var(--black); }
.city-link {
    padding: 16px 18px; border-right: 3px solid var(--black); border-bottom: 3px solid var(--black);
    font-weight: 600; font-size: .92rem;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    transition: background .15s, padding-left .15s;
    background: #fff;
}
.city-link:nth-child(4n) { border-right: none; }
.cities-grid .city-link:nth-last-child(-n+4) { border-bottom: none; }
.city-link:hover { background: var(--yellow); padding-left: 22px; }
.city-link::after { content: "→"; font-weight: 900; opacity: .4; transition: opacity .15s, transform .15s; }
.city-link:hover::after { opacity: 1; transform: translateX(3px); }
@media (max-width: 900px) {
    .cities-grid { grid-template-columns: repeat(2, 1fr); }
    .city-link:nth-child(4n) { border-right: 3px solid var(--black); }
    .city-link:nth-child(2n) { border-right: none; }
    .cities-grid .city-link:nth-last-child(-n+4) { border-bottom: 3px solid var(--black); }
    .cities-grid .city-link:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 520px) {
    .cities-grid { grid-template-columns: 1fr; }
    .city-link { border-right: none !important; border-bottom: 3px solid var(--black) !important; }
    .cities-grid .city-link:last-child { border-bottom: none !important; }
}

/* NEARBY (page-detail) */
.nearby { background: #fff; }
.nearby-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 3px solid var(--black); }
.nearby-link {
    padding: 18px 16px; border-right: 3px solid var(--black); border-bottom: 3px solid var(--black);
    display: flex; flex-direction: column; gap: 4px;
    transition: background .15s, padding-left .15s; background: #fff;
}
.nearby-link:nth-child(4n) { border-right: none; }
.nearby-grid .nearby-link:nth-last-child(-n+4) { border-bottom: none; }
.nearby-link:hover { background: var(--yellow); padding-left: 22px; }
.nearby-name { font-weight: 900; text-transform: uppercase; font-size: .92rem; letter-spacing: -.01em; }
.nearby-meta { font-size: .72rem; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.nearby-meta strong { color: #002b6b; font-weight: 900; }
@media (max-width: 900px) {
    .nearby-grid { grid-template-columns: repeat(2, 1fr); }
    .nearby-link:nth-child(4n) { border-right: 3px solid var(--black); }
    .nearby-link:nth-child(2n) { border-right: none; }
    .nearby-grid .nearby-link:nth-last-child(-n+4) { border-bottom: 3px solid var(--black); }
    .nearby-grid .nearby-link:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 520px) {
    .nearby-grid { grid-template-columns: 1fr; }
    .nearby-link { border-right: none !important; border-bottom: 3px solid var(--black) !important; }
    .nearby-grid .nearby-link:last-child { border-bottom: none !important; }
}

/* OTHER DEPTS / OTHER SERVICES */
.other-depts, .other-services { background: #fff; padding: 50px 0; border-top: 3px solid var(--black); }
.other-depts-title, .other-services-title {
    font-size: 1rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: 18px;
}
.other-depts-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border: 3px solid var(--black); }
.other-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 3px solid var(--black); }
.other-dept-link {
    padding: 14px 12px; border-right: 3px solid var(--black);
    font-weight: 700; font-size: .85rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: background .15s;
}
.other-dept-link:last-child { border-right: none; }
.other-dept-link:hover { background: var(--yellow); }
.other-dept-link strong {
    background: var(--black); color: var(--yellow);
    padding: 2px 7px; font-size: .78rem; letter-spacing: .04em;
}
.other-dept-link span { font-size: .72rem; color: #444; text-transform: uppercase; letter-spacing: .02em; }
.other-service {
    padding: 22px 20px; border-right: 3px solid var(--black);
    display: flex; flex-direction: column; gap: 8px;
    transition: background .15s, padding-left .15s;
}
.other-service:last-child { border-right: none; }
.other-service:hover { background: var(--yellow); padding-left: 26px; }
.other-service-num {
    display: inline-block; background: var(--black); color: var(--yellow);
    padding: 3px 8px; font-size: .7rem; font-weight: 700; letter-spacing: .05em;
    align-self: flex-start;
}
.other-service-name { font-weight: 900; text-transform: uppercase; font-size: 1rem; letter-spacing: -.01em; }
.other-service-price { font-size: .85rem; font-weight: 700; color: #444; }
.other-service-price strong { color: var(--black); font-weight: 900; font-size: 1rem; }
@media (max-width: 900px) {
    .other-depts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .other-services-grid { grid-template-columns: 1fr; }
    .other-service { border-right: none; border-bottom: 3px solid var(--black); }
    .other-service:last-child { border-bottom: none; }
}
@media (max-width: 520px) {
    .other-depts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* QUARTIERS (page-detail / ville) */
.quartiers { background: var(--gray-bg); }
.quartiers-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.quartiers-list { border: 3px solid var(--black); background: #fff; }
.quartier-row {
    padding: 18px 22px; border-bottom: 3px solid var(--black);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.quartier-row:last-child { border-bottom: none; }
.quartier-name { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.quartier-desc { font-size: .82rem; color: #444; margin-top: 2px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.quartier-time {
    background: var(--yellow); padding: 6px 12px;
    font-size: .85rem; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase;
    border: 2px solid var(--black); white-space: nowrap;
}
.quartiers-map {
    background: #fff; border: 3px solid var(--black);
    box-shadow: 8px 8px 0 var(--black); padding: 24px;
}
.quartiers-map h3 { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.quartiers-map svg { width: 100%; height: auto; display: block; }
.quartiers-map-legend {
    margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--black);
    font-size: .82rem; line-height: 1.55; font-weight: 500;
}
.quartiers-map-legend strong { font-weight: 900; }
@media (max-width: 900px) { .quartiers-layout { grid-template-columns: 1fr; gap: 30px; } }

/* MARQUES (serrures supportées) */
.marques { background: #fff; }
.marques-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 3px solid var(--black); margin-bottom: 24px; }
.marque-cell {
    padding: 24px 16px; border-right: 3px solid var(--black);
    text-align: center; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    transition: background .15s;
}
.marque-cell:last-child { border-right: none; }
.marque-cell:hover { background: var(--yellow); }
.marque-name { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.marque-type { font-size: .72rem; color: #666; font-weight: 600; }
.marques-note {
    background: var(--gray-bg); border: 3px solid var(--black);
    padding: 18px 22px; font-size: .88rem; line-height: 1.6;
}
.marques-note strong { font-weight: 900; background: var(--yellow); padding: 1px 4px; }
@media (max-width: 900px) {
    .marques-grid { grid-template-columns: repeat(2, 1fr); }
    .marque-cell { border-right: none !important; border-bottom: 3px solid var(--black); }
    .marques-grid .marque-cell:nth-child(2n-1) { border-right: 3px solid var(--black) !important; }
    .marques-grid .marque-cell:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 520px) {
    .marques-grid { grid-template-columns: 1fr; }
    .marque-cell { border-right: none !important; }
}

/* USE CASES (service page) */
.use-cases { background: #fff; }
.use-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 3px solid var(--black); }
.use-case {
    padding: 30px 26px; border-right: 3px solid var(--black);
    background: #fff; display: flex; flex-direction: column;
    transition: background .15s;
}
.use-case:last-child { border-right: none; }
.use-case:hover { background: var(--yellow); }
.use-case-icon {
    width: 60px; height: 60px; background: var(--yellow);
    display: grid; place-items: center; font-size: 1.6rem;
    border: 3px solid var(--black); margin-bottom: 16px; flex-shrink: 0;
}
.use-case:hover .use-case-icon { background: #fff; }
.use-case-num {
    display: inline-block; background: var(--black); color: var(--yellow);
    padding: 3px 9px; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    margin-bottom: 10px;
}
.use-case h3 {
    font-size: 1.2rem; font-weight: 900; text-transform: uppercase;
    line-height: 1.15; letter-spacing: -.01em; margin-bottom: 12px;
}
.use-case p { font-size: .9rem; color: #222; line-height: 1.6; margin-bottom: 16px; flex-grow: 1; }
.use-case-tag {
    display: inline-block; background: var(--gray-bg); border: 2px solid var(--black);
    padding: 6px 12px; font-size: .78rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: .02em;
}
.use-case:hover .use-case-tag { background: var(--black); color: var(--yellow); }
@media (max-width: 900px) {
    .use-cases-grid { grid-template-columns: 1fr; }
    .use-case { border-right: none; border-bottom: 3px solid var(--black); }
    .use-case:last-child { border-bottom: none; }
}

/* COMPARISON (sans casse / avec casse) */
.comparison { background: var(--gray-bg); }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.comparison-col {
    border: 3px solid var(--black); background: #fff;
    display: flex; flex-direction: column;
}
.comparison-col.preferred {
    background: var(--yellow); box-shadow: 8px 8px 0 var(--black); position: relative;
}
.comparison-col.preferred::before {
    content: "★ DANS 80% DES CAS"; position: absolute; top: -3px; right: -3px;
    background: var(--green); color: #fff;
    padding: 5px 10px; font-size: .7rem; font-weight: 900; letter-spacing: .05em;
    border: 3px solid var(--black);
}
.comparison-head { padding: 20px 24px; border-bottom: 3px solid var(--black); }
.comparison-head h3 {
    font-size: 1.3rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: -.02em; line-height: 1.1; margin-bottom: 6px;
}
.comparison-head p { font-size: .85rem; color: #444; font-weight: 500; }
.comparison-col.preferred .comparison-head p { color: #222; font-weight: 600; }
.comparison-body { padding: 20px 24px; flex-grow: 1; }
.comparison-body ul li {
    padding: 10px 0; display: flex; align-items: flex-start; gap: 10px;
    font-size: .9rem; line-height: 1.5; font-weight: 500;
    border-bottom: 2px dashed rgba(0, 0, 0, .15);
}
.comparison-body ul li:last-child { border-bottom: none; }
.comparison-body ul li::before { content: "✓"; color: var(--green); font-weight: 900; flex-shrink: 0; font-size: 1rem; }
.comparison-foot {
    background: var(--gray-bg); padding: 16px 24px; border-top: 3px solid var(--black);
    font-size: .85rem; display: flex; justify-content: space-between; align-items: center; font-weight: 700;
}
.comparison-col.preferred .comparison-foot { background: #fff; }
.comparison-foot strong { font-size: 1.1rem; font-weight: 900; letter-spacing: -.01em; }
@media (max-width: 900px) { .comparison-grid { grid-template-columns: 1fr; } }

/* TECHNIQUE */
.technique { background: #fff; }
.technique-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.technique-visual { background: var(--gray-bg); border: 3px solid var(--black); padding: 32px; box-shadow: 8px 8px 0 var(--black); }
.technique-visual svg { width: 100%; height: auto; }
.technique-content h2 {
    font-size: 2.1rem; font-weight: 900; text-transform: uppercase;
    line-height: 1; letter-spacing: -.02em; margin-bottom: 18px;
}
.technique-content h2 em { background: var(--yellow); font-style: normal; padding: 0 10px; }
.technique-content > p { font-size: .95rem; line-height: 1.7; margin-bottom: 20px; color: #1a1a1a; font-weight: 500; }
.technique-steps { border: 3px solid var(--black); background: #fff; margin-top: 20px; }
.technique-step {
    padding: 14px 18px; border-bottom: 3px solid var(--black);
    display: flex; align-items: flex-start; gap: 14px;
}
.technique-step:last-child { border-bottom: none; }
.technique-step-num {
    background: var(--yellow); color: var(--black);
    width: 32px; height: 32px; display: grid; place-items: center;
    font-weight: 900; font-size: .95rem; flex-shrink: 0; border: 2px solid var(--black);
}
.technique-step-text strong { display: block; font-weight: 900; text-transform: uppercase; font-size: .85rem; letter-spacing: -.01em; margin-bottom: 2px; }
.technique-step-text span { font-size: .82rem; color: #444; font-weight: 500; line-height: 1.5; }
@media (max-width: 900px) {
    .technique-grid { grid-template-columns: 1fr; gap: 30px; }
    .technique-content h2 { font-size: 1.7rem; }
}

/* TEAM (rassurance) */
.team { background: var(--yellow); }
.team-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: center; }
.team-visual { background: #fff; border: 3px solid var(--black); padding: 32px; box-shadow: 8px 8px 0 var(--black); }
.team-visual svg { width: 100%; height: auto; display: block; }
.team-content h2 {
    font-size: 2.2rem; font-weight: 900; text-transform: uppercase;
    line-height: 1; letter-spacing: -.02em; margin-bottom: 20px;
}
.team-content h2 em { background: var(--black); color: var(--yellow); font-style: normal; padding: 0 10px; }
.team-content p { font-size: .96rem; line-height: 1.7; margin-bottom: 20px; color: #1a1a1a; font-weight: 500; }
.team-creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.team-cred {
    background: var(--black); color: var(--yellow);
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    border: 3px solid var(--black);
}
.team-cred strong { font-size: .9rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; display: block; line-height: 1.1; margin-bottom: 2px; }
.team-cred span { font-size: .75rem; color: #aaa; font-weight: 500; }
.team-cred-icon {
    width: 36px; height: 36px; background: var(--yellow); color: var(--black);
    display: grid; place-items: center; font-weight: 900; font-size: 1rem; flex-shrink: 0;
}
@media (max-width: 900px) {
    .team-grid { grid-template-columns: 1fr; gap: 30px; }
    .team-content h2 { font-size: 1.7rem; }
    .team-creds { grid-template-columns: 1fr; }
}

/* BOX TYPES (service) */
.boxtypes { background: #fff; }
.boxtypes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 3px solid var(--black); }
.boxtype {
    padding: 24px 20px; border-right: 3px solid var(--black);
    text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 10px; transition: background .15s;
}
.boxtype:last-child { border-right: none; }
.boxtype:hover { background: var(--yellow); }
.boxtype-svg { width: 80px; height: 80px; display: grid; place-items: center; }
.boxtype-svg svg { width: 100%; height: 100%; }
.boxtype-name { font-size: .95rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.boxtype-desc { font-size: .78rem; color: #666; font-weight: 600; line-height: 1.4; }
@media (max-width: 900px) {
    .boxtypes-grid { grid-template-columns: repeat(2, 1fr); }
    .boxtype { border-right: none; }
    .boxtype:nth-child(2n-1) { border-right: 3px solid var(--black); }
    .boxtype:nth-child(-n+2) { border-bottom: 3px solid var(--black); }
}
@media (max-width: 520px) {
    .boxtypes-grid { grid-template-columns: 1fr; }
    .boxtype { border-right: none !important; border-bottom: 3px solid var(--black); }
    .boxtype:last-child { border-bottom: none; }
}

/* SPECIAL CASES (service) */
.special-cases { background: var(--gray-bg); }
.special-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.special-case { background: #fff; border: 3px solid var(--black); padding: 24px; display: flex; flex-direction: column; }
.special-case-tag {
    display: inline-block; background: var(--black); color: var(--yellow);
    padding: 4px 10px; font-size: .7rem; font-weight: 900; letter-spacing: .05em;
    margin-bottom: 12px; align-self: flex-start;
}
.special-case h4 {
    font-size: 1rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: -.01em; line-height: 1.2; margin-bottom: 10px;
}
.special-case p { font-size: .85rem; line-height: 1.6; color: #222; flex-grow: 1; font-weight: 500; }
.special-case-action {
    margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--black);
    font-size: .82rem; font-weight: 700;
}
.special-case-action strong { font-weight: 900; background: var(--yellow); padding: 1px 6px; }
@media (max-width: 900px) { .special-cases-grid { grid-template-columns: 1fr; } }

/* REVIEWS / AVIS */
.reviews { background: var(--yellow); border-top: 3px solid var(--black); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 36px; }
.review-card {
    background: #fff; border: 3px solid var(--black); padding: 24px;
    box-shadow: 6px 6px 0 var(--black);
    display: flex; flex-direction: column;
}
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.review-stars { font-size: 1.1rem; letter-spacing: 3px; margin-bottom: 14px; }
.review-date { font-size: .72rem; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.review-service-tag, .review-result-tag {
    display: inline-block; padding: 3px 9px;
    font-size: .7rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: 10px; align-self: flex-start;
}
.review-service-tag { background: var(--gray-bg); border: 2px solid var(--black); }
.review-result-tag { background: var(--green); color: #fff; }
.review-text { font-size: .95rem; line-height: 1.55; margin-bottom: 18px; flex-grow: 1; color: #1a1a1a; font-weight: 500; }
.review-author {
    padding-top: 14px; border-top: 2px dashed var(--black);
    display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem;
}
.review-author strong { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.review-author span, .review-author .city, .review-author .quartier {
    background: var(--black); color: var(--yellow);
    padding: 2px 8px; font-size: .72rem; letter-spacing: .04em;
}
.review-author span:not(.city):not(.quartier) { background: transparent; color: #666; padding: 0; }

.trust-badges {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
    border: 3px solid var(--black); background: #fff;
}
.trust-badge {
    flex: 1; min-width: 180px; padding: 14px 20px;
    font-weight: 700; font-size: .85rem; text-transform: uppercase;
    text-align: center; border-right: 3px solid var(--black); letter-spacing: .02em;
}
.trust-badge:last-child { border-right: none; }
.trust-badge::before { content: "✓ "; font-weight: 900; }
.trust-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border: 3px solid var(--black); background: #fff;
}
.trust-row .trust-badge {
    padding: 18px 16px; border-right: 3px solid var(--black);
    display: flex; align-items: center; gap: 12px; text-align: left;
    font-weight: 600; font-size: .85rem;
}
.trust-row .trust-badge:last-child { border-right: none; }
.trust-row .trust-badge::before { content: ""; }
.trust-icon-mini {
    width: 36px; height: 36px; background: var(--green); color: #fff;
    display: grid; place-items: center; font-weight: 900; font-size: 1rem; flex-shrink: 0;
    border: 2px solid var(--black);
}
.trust-row .trust-badge strong { display: block; font-weight: 900; text-transform: uppercase; font-size: .82rem; letter-spacing: -.01em; line-height: 1.1; }
.trust-row .trust-badge span { font-size: .72rem; color: #666; font-weight: 500; text-transform: none; letter-spacing: 0; }
.reviews-cta-row {
    background: var(--black); color: #fff; padding: 20px 26px;
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--black); flex-wrap: wrap;
}
.reviews-cta-row strong { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.reviews-cta-row span { font-size: .85rem; color: #bbb; font-weight: 500; }
.reviews-cta-row a {
    background: var(--yellow); color: var(--black);
    padding: 11px 20px; font-weight: 900; font-size: .88rem; text-transform: uppercase;
    letter-spacing: .05em; border: 2px solid #fff;
}
.reviews-cta-row a:hover { background: #fff; border-color: var(--yellow); }
.reviews-empty {
    background: #fff; border: 3px solid var(--black);
    padding: 40px 30px; text-align: center; font-size: .95rem;
    box-shadow: 6px 6px 0 var(--black);
}
.reviews-empty strong { display: block; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; letter-spacing: -.01em; }
@media (max-width: 900px) {
    .reviews-grid { grid-template-columns: 1fr; }
    .trust-badges .trust-badge { flex: 1 1 100%; border-right: none; border-bottom: 3px solid var(--black); }
    .trust-badges .trust-badge:last-child { border-bottom: none; }
    .trust-row { grid-template-columns: repeat(2, 1fr); }
    .trust-row .trust-badge:nth-child(2) { border-right: none; }
    .trust-row .trust-badge:nth-child(-n+2) { border-bottom: 3px solid var(--black); }
    .reviews-cta-row { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
    .trust-row { grid-template-columns: 1fr; }
    .trust-row .trust-badge { border-right: none !important; border-bottom: 3px solid var(--black) !important; }
    .trust-row .trust-badge:last-child { border-bottom: none !important; }
}

/* FAQ */
.faq { background: var(--gray-bg); }
.faq-list { max-width: 880px; margin: 0 auto; border: 3px solid var(--black); background: #fff; }
.faq-item { border-bottom: 3px solid var(--black); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
    padding: 18px 22px; cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    font-weight: 900; font-size: .95rem; text-transform: uppercase; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--yellow); }
.faq-item[open] summary { background: var(--black); color: var(--yellow); }
.faq-item summary::after { content: "[+]"; font-size: .85rem; flex-shrink: 0; font-weight: 700; }
.faq-item[open] summary::after { content: "[−]"; }
.faq-answer {
    padding: 18px 22px; color: #222;
    line-height: 1.7; font-size: .92rem; font-weight: 500;
    background: #fff; border-top: 3px solid var(--black);
}
.faq-answer strong { font-weight: 900; background: var(--yellow); padding: 1px 4px; }
.faq-answer ul { margin-top: 8px; padding-left: 0; }
.faq-answer ul li { padding: 4px 0; display: flex; gap: 10px; }
.faq-answer ul li::before { content: "▶"; color: var(--green); font-size: .7rem; flex-shrink: 0; padding-top: 5px; }

/* CONTACT EXPRESS (formulaire) */
.contact-express { background: var(--gray-bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-info {
    background: var(--black); color: var(--yellow);
    padding: 32px; border: 3px solid var(--black);
    box-shadow: 8px 8px 0 var(--yellow), 8px 8px 0 3px var(--black);
}
.contact-info h3 { font-size: 1.4rem; font-weight: 900; text-transform: uppercase; margin-bottom: 14px; }
.contact-info p { font-size: .9rem; line-height: 1.6; margin-bottom: 20px; color: #ccc; }
.contact-info-phone {
    display: block; font-size: 2rem; font-weight: 900; color: var(--yellow);
    margin-bottom: 16px; letter-spacing: -.02em;
}
.contact-info ul { margin-top: 20px; }
.contact-info ul li {
    padding: 8px 0; font-size: .85rem; display: flex; gap: 10px; align-items: flex-start;
    border-bottom: 1px solid #333;
}
.contact-info ul li:last-child { border-bottom: none; }
.contact-info ul li::before { content: "▶"; color: var(--yellow); font-size: .7rem; padding-top: 4px; flex-shrink: 0; }
.contact-form {
    background: #fff; border: 3px solid var(--black);
    padding: 28px; box-shadow: 8px 8px 0 var(--black);
}
.contact-form h3 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; margin-bottom: 18px; letter-spacing: -.01em; }
.contact-form .field { margin-bottom: 16px; }
.contact-form label {
    display: block; font-size: .78rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: 6px;
}
.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%; padding: 12px 14px;
    font-family: inherit; font-size: .92rem;
    border: 3px solid var(--black); background: #fff; color: var(--black);
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
    outline: none; box-shadow: 4px 4px 0 var(--black); transform: translate(-2px, -2px);
}
.contact-form button[type="submit"] {
    width: 100%; background: var(--black); color: var(--yellow);
    padding: 16px; font-weight: 900; font-size: 1rem; text-transform: uppercase;
    letter-spacing: .05em; border: 3px solid var(--black);
    box-shadow: 6px 6px 0 var(--yellow), 6px 6px 0 3px var(--black);
    transition: transform .12s, box-shadow .12s;
}
.contact-form button[type="submit"]:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--yellow), 8px 8px 0 3px var(--black);
}
.contact-form .small {
    font-size: .75rem; color: #666; margin-top: 12px; line-height: 1.5;
}
.contact-form .form-status {
    padding: 10px 14px; border: 2px solid var(--black);
    font-size: .85rem; font-weight: 700; margin-bottom: 14px;
}
.contact-form .form-status.success { background: var(--green); color: #fff; }
.contact-form .form-status.error { background: var(--red); color: #fff; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } }

/* PROOF BAR (compact horizontal) */
.proof-bar {
    background: var(--gray-bg); padding: 22px 0;
    border-top: 3px solid var(--black); border-bottom: 3px solid var(--black);
}
.proof-bar-inner {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: center;
}
.proof-bar-item { padding: 6px 14px; border-right: 2px dashed var(--black); }
.proof-bar-item:last-child { border-right: none; }
.proof-bar-item strong {
    display: block; font-size: 1.2rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: -.01em; margin-bottom: 3px;
}
.proof-bar-item span { font-size: .78rem; color: #444; font-weight: 500; }
@media (max-width: 768px) {
    .proof-bar-inner { grid-template-columns: 1fr; gap: 14px; }
    .proof-bar-item { border-right: none; border-bottom: 2px dashed var(--black); padding-bottom: 14px; }
    .proof-bar-item:last-child { border-bottom: none; }
}

/* ENGAGEMENTS (BAL — anti-arnaque) */
.engagements { background: #fff; }
.engagements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 3px solid var(--black); }
.engagement-card {
    padding: 28px 24px; border-right: 3px solid var(--black);
    display: flex; flex-direction: column; gap: 10px;
}
.engagement-card:last-child { border-right: none; }
.engagement-num {
    background: var(--yellow); color: var(--black);
    padding: 4px 10px; font-size: .78rem; font-weight: 900; letter-spacing: .05em;
    align-self: flex-start; border: 2px solid var(--black);
}
.engagement-card h3 { font-size: 1.05rem; font-weight: 900; text-transform: uppercase; line-height: 1.2; }
.engagement-card p { font-size: .88rem; line-height: 1.6; color: #222; font-weight: 500; }
@media (max-width: 768px) {
    .engagements-grid { grid-template-columns: 1fr; }
    .engagement-card { border-right: none; border-bottom: 3px solid var(--black); }
    .engagement-card:last-child { border-bottom: none; }
}

/* FINAL CTA */
.final-cta { background: var(--black); color: var(--yellow); text-align: center; padding: 80px 20px; position: relative; }
.final-cta-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green); color: #fff; padding: 6px 14px;
    font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
    margin-bottom: 20px;
}
.final-cta-tag::before { content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: blink 1.2s ease-in-out infinite; }
.final-cta h2 {
    font-size: 2.6rem; font-weight: 900; text-transform: uppercase;
    line-height: 1; letter-spacing: -.03em; margin-bottom: 14px;
}
.final-cta h2 em { background: var(--yellow); color: var(--black); font-style: normal; padding: 0 12px; display: inline-block; }
.final-cta p { font-size: 1rem; color: #bbb; margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; font-weight: 500; }
.final-phone {
    display: block; font-size: 3.4rem; font-weight: 900; color: var(--yellow);
    margin-bottom: 24px; letter-spacing: -.02em; line-height: 1;
}
.final-phone:hover { background: var(--yellow); color: var(--black); padding: 0 16px; }
.final-cta .cta-primary { background: var(--yellow); color: var(--black); box-shadow: 6px 6px 0 var(--yellow); }
.final-cta .cta-primary:hover { background: #fff; box-shadow: 9px 9px 0 var(--yellow); }
.final-meta {
    margin-top: 24px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #888;
}
.final-meta span::before { content: "✓ "; color: var(--green); font-weight: 900; }
@media (max-width: 768px) {
    .final-cta h2 { font-size: 1.7rem; }
    .final-phone { font-size: 2.2rem; }
}

/* ARTICLE BODY (page-detail / a-propos) */
.article-body { background: #fff; }
.article-body-inner { max-width: 820px; margin: 0 auto; }
.article-body h2 {
    font-size: 1.8rem; font-weight: 900; text-transform: uppercase;
    margin: 32px 0 14px; line-height: 1.1; letter-spacing: -.02em;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
    font-size: 1.2rem; font-weight: 900; text-transform: uppercase;
    margin: 24px 0 10px; line-height: 1.2;
}
.article-body p { font-size: 1rem; line-height: 1.75; margin-bottom: 16px; color: #222; }
.article-body strong { background: var(--yellow); padding: 1px 4px; font-weight: 900; }
.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 16px; }
.article-body li { margin-bottom: 6px; line-height: 1.65; }
.article-body a { border-bottom: 2px solid var(--black); }
.article-body a:hover { background: var(--yellow); }
.article-body blockquote {
    border-left: 5px solid var(--black); background: var(--gray-bg);
    padding: 18px 22px; margin: 22px 0; font-style: italic;
}

/* FOOTER */
.footer { background: #fff; color: var(--black); padding: 50px 0 100px; border-top: 3px solid var(--black); font-size: .88rem; }
.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 36px; margin-bottom: 30px; padding-bottom: 30px;
    border-bottom: 3px solid var(--black);
}
.footer-brand h3 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; letter-spacing: -.01em; }
.footer-brand p { margin-bottom: 16px; line-height: 1.55; }
.footer-phone-block {
    background: var(--yellow); padding: 14px; border: 3px solid var(--black);
    box-shadow: 5px 5px 0 var(--black);
}
.footer-phone-block strong { font-size: 1.2rem; display: block; font-weight: 900; letter-spacing: -.02em; }
.footer-phone-block small { font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.footer h4 { font-size: .85rem; text-transform: uppercase; margin-bottom: 12px; font-weight: 900; letter-spacing: .05em; border-bottom: 2px solid var(--black); padding-bottom: 6px; }
.footer ul li { margin-bottom: 6px; }
.footer ul a:hover { background: var(--yellow); padding: 0 4px; margin: 0 -4px; }
.footer-bottom { text-align: center; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* STICKY MOBILE */
.sticky-mobile {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
    background: var(--yellow); padding: 10px 12px; border-top: 3px solid var(--black);
}
.sticky-mobile a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--black); color: var(--yellow);
    padding: 14px; font-weight: 900; font-size: 1rem; letter-spacing: .03em; text-transform: uppercase;
    border: 3px solid var(--black); box-shadow: 4px 4px 0 var(--black);
}
@media (max-width: 768px) {
    .sticky-mobile { display: block; }
    body { padding-bottom: 90px; }
    .footer { padding-bottom: 30px; }
}

/* TAG (utilitaire) */
.tag {
    display: inline-block; background: var(--black); color: var(--yellow);
    padding: 3px 9px; font-size: .72rem; font-weight: 900; letter-spacing: .05em;
    text-transform: uppercase;
}
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--black); color: var(--yellow);
    padding: 14px 22px; font-weight: 900; font-size: .92rem;
    letter-spacing: .02em; text-transform: uppercase;
    border: 3px solid var(--black); box-shadow: 4px 4px 0 var(--black);
    transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); background: var(--yellow); color: var(--black); }
.btn--ghost { background: #fff; color: var(--black); }
.btn--ghost:hover { background: var(--yellow); }
.last-updated { color: #888; font-size: .85em; text-align: center; margin: 40px 16px 24px; }