/* ============================================================
   PMD-GAZ — CSS consolidé
   Généré par scripts/extract_css.py depuis les maquettes Claude Design.
   NE PAS éditer à la main : modifier les maquettes ou créer un .css custom.
   ============================================================ */

@import url("./tokens.css");


/* =========================================================================
   Design System.html
   ========================================================================= */
/* ---------- Layout DS ---------- */
  body { background: var(--c-bone-100); }

  .ds-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
  }
  @media (max-width: 900px) { .ds-shell { grid-template-columns: 1fr; } }

  .ds-side {
    background: var(--c-ink-900);
    color: var(--c-bone-100);
    padding: var(--sp-10) var(--sp-6);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  @media (max-width: 900px) { .ds-side { position: static; height: auto; } }

  .ds-side .brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: var(--tr-tight);
    color: var(--c-bone-50);
    margin: 0 0 var(--sp-2);
  }
  .ds-side .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .ds-side .brand-mark::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--c-orange-600);
    display: block;
    transform: rotate(45deg);
  }
  .ds-side .sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-blue-300);
    letter-spacing: var(--tr-wide);
    margin-bottom: var(--sp-10);
  }
  .ds-nav { display: flex; flex-direction: column; gap: 2px; }
  .ds-nav-group {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
    color: var(--c-ink-300);
    margin: var(--sp-6) 0 var(--sp-2);
  }
  .ds-nav a {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    color: var(--c-bone-200);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: var(--tr-fast);
  }
  .ds-nav a:hover { background: rgba(255,255,255,0.06); color: var(--c-bone-50); }
  .ds-nav a .num { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); }

  .ds-main { padding: var(--sp-12) clamp(20px, 5vw, 64px); }
  @media (max-width: 900px) { .ds-main { padding: var(--sp-8) var(--sp-5); } }

  .ds-doc-head {
    border-bottom: var(--bd-hairline);
    padding-bottom: var(--sp-8);
    margin-bottom: var(--sp-12);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-6);
    align-items: end;
  }
  .ds-doc-head h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin: 0;
  }
  .ds-doc-head p {
    color: var(--c-ink-500);
    font-size: var(--fs-md);
    margin-top: var(--sp-3);
    max-width: 56ch;
  }
  .ds-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    text-align: right;
    line-height: 1.8;
    letter-spacing: var(--tr-wide);
  }
  .ds-meta strong { color: var(--c-ink-900); font-weight: 600; }

  section.ds-section {
    margin-bottom: var(--sp-24);
  }
  .ds-section-head {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--sp-6);
    margin-bottom: var(--sp-10);
    align-items: baseline;
  }
  .ds-section-head .num {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--c-blue-700);
    letter-spacing: var(--tr-wide);
    border-top: 2px solid var(--c-ink-900);
    padding-top: var(--sp-3);
  }
  .ds-section-head h2 {
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    border-top: 2px solid var(--c-ink-900);
    padding-top: var(--sp-3);
  }
  .ds-section-head p {
    grid-column: 2;
    color: var(--c-ink-500);
    margin-top: var(--sp-3);
    max-width: 60ch;
  }

  .ds-card {
    background: var(--c-bone-50);
    border: var(--bd-hairline);
    border-radius: var(--r-md);
    padding: var(--sp-8);
    margin-bottom: var(--sp-6);
  }
  .ds-card-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    margin-bottom: var(--sp-2);
  }
  .ds-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-6);
  }

  /* ---------- Couleurs ---------- */
  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sp-4);
  }
  .swatch {
    border: var(--bd-hairline);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-bone-50);
  }
  .swatch .chip {
    aspect-ratio: 4 / 3;
    border-bottom: var(--bd-hairline);
  }
  .swatch .meta {
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--c-ink-500);
  }
  .swatch .meta .name { color: var(--c-ink-900); font-weight: 500; font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: var(--tr-snug); }
  .swatch .meta .hex { display: block; margin-top: 2px; }

  .palette-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--sp-6);
    align-items: start;
    margin-bottom: var(--sp-10);
  }
  .palette-row h4 {
    font-size: var(--fs-md);
    margin: 0 0 var(--sp-2);
  }
  .palette-row .role {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
  }
  .palette-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 1px;
    background: var(--c-bone-300);
    border: var(--bd-hairline);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .palette-cell {
    padding: var(--sp-4);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tr-wide);
  }
  .palette-cell .step { font-weight: 500; opacity: 0.85; }
  .palette-cell .hex  { font-size: 9px; opacity: 0.75; margin-top: 2px; }

  /* ---------- Type spec ---------- */
  .type-spec {
    display: grid;
    grid-template-columns: 100px 1fr 220px;
    gap: var(--sp-6);
    align-items: baseline;
    padding: var(--sp-6) 0;
    border-bottom: var(--bd-hairline);
  }
  .type-spec:last-child { border-bottom: none; }
  .type-spec .label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    padding-top: 8px;
  }
  .type-spec .specs {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    line-height: 1.8;
    text-align: right;
  }
  .type-spec .specs strong { color: var(--c-ink-900); font-weight: 500; }

  .t-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: var(--tr-tight); line-height: 1.05; }
  .t-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 4vw, 3.5rem); letter-spacing: var(--tr-tight); line-height: 1.1; }
  .t-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.875rem, 3vw, 2.5rem); letter-spacing: var(--tr-tight); line-height: 1.15; }
  .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); letter-spacing: var(--tr-snug); }
  .t-eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-blue-700); }
  .t-body { font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.7; color: var(--c-ink-700); max-width: 60ch; }
  .t-data { font-family: var(--font-display); font-weight: 700; font-size: 2rem; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-snug); }

  /* ---------- Spacing scale ---------- */
  .space-scale { display: flex; flex-direction: column; gap: var(--sp-2); }
  .space-row {
    display: grid;
    grid-template-columns: 80px 60px 1fr;
    gap: var(--sp-4);
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-ink-500);
  }
  .space-row .name { color: var(--c-ink-900); font-weight: 500; }
  .space-row .bar { background: var(--c-blue-700); height: 14px; }

  /* ---------- Component examples ---------- */
  .demo {
    background: var(--c-bone-50);
    border: var(--bd-hairline);
    border-radius: var(--r-md);
    padding: var(--sp-8);
    margin-bottom: var(--sp-3);
    position: relative;
  }
  .demo::before {
    content: attr(data-label);
    position: absolute;
    top: -10px; left: 16px;
    background: var(--c-bone-100);
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
  }
  .demo-grid { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
  .demo-stack { display: flex; flex-direction: column; gap: var(--sp-4); }

  /* Service card */
  .svc-card {
    background: var(--c-bone-50);
    border: var(--bd-hairline);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-4);
    transition: var(--tr-base);
    cursor: pointer;
    max-width: 320px;
  }
  .svc-card:hover {
    border-color: var(--c-blue-700);
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
  }
  .svc-card .ref {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    display: flex;
    justify-content: space-between;
    border-bottom: var(--bd-hairline);
    padding-bottom: var(--sp-2);
  }
  .svc-card .icon {
    width: 48px; height: 48px;
    color: var(--c-blue-700);
  }
  .svc-card h4 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: var(--tr-snug);
    margin: 0;
  }
  .svc-card p {
    font-size: var(--fs-sm);
    color: var(--c-ink-500);
    line-height: 1.6;
  }
  .svc-card .price {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: var(--bd-hairline);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .svc-card .price .from {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
  }
  .svc-card .price .amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    font-variant-numeric: tabular-nums;
  }

  /* Trust KPI */
  .kpi {
    border-left: 2px solid var(--c-blue-700);
    padding: var(--sp-2) var(--sp-5);
  }
  .kpi .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-tight);
    line-height: 1;
  }
  .kpi .label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    margin-top: var(--sp-2);
  }

  /* Annonce bar */
  .annonce {
    background: var(--c-ink-900);
    color: var(--c-bone-100);
    padding: 10px 20px;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    letter-spacing: var(--tr-snug);
  }
  .annonce .dot {
    width: 8px; height: 8px;
    background: var(--c-red-600);
    border-radius: 50%;
    animation: blink 1.6s infinite;
  }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

  /* Quote */
  .quote {
    background: var(--c-bone-50);
    border: var(--bd-hairline);
    padding: var(--sp-10);
    max-width: 640px;
    position: relative;
  }
  .quote::before {
    content: "\201C";
    position: absolute;
    top: 16px; left: 24px;
    font-family: "Times New Roman", serif;
    font-size: 72px;
    line-height: 1;
    color: var(--c-blue-700);
  }
  .quote blockquote {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: var(--tr-snug);
    margin: 0 0 var(--sp-6);
    padding-left: var(--sp-10);
  }
  .quote cite {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-left: var(--sp-10);
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--c-ink-500);
    border-top: var(--bd-hairline);
    padding-top: var(--sp-4);
  }
  .quote cite strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }
  .quote .stars { color: var(--c-orange-600); display: flex; gap: 2px; }
  .quote .stars svg { width: 14px; height: 14px; }

  /* Ticket signature */
  .ticket {
    background: var(--c-bone-50);
    border: 1.5px solid var(--c-ink-900);
    padding: var(--sp-6);
    max-width: 360px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    position: relative;
  }
  .ticket::before, .ticket::after {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    background: var(--c-bone-100);
    border-radius: 50%;
    top: 30%;
  }
  .ticket::before { left: -9px; border-right: 1.5px solid var(--c-ink-900); }
  .ticket::after  { right: -9px; border-left: 1.5px solid var(--c-ink-900); }
  .ticket-head {
    display: flex; justify-content: space-between;
    border-bottom: 1px dashed var(--c-ink-300);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .ticket-head .id { color: var(--c-blue-700); font-weight: 500; letter-spacing: var(--tr-wide); }
  .ticket-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--sp-4);
    margin: var(--sp-2) 0;
  }
  .ticket-row .k { color: var(--c-ink-500); }
  .ticket-row .v { color: var(--c-ink-900); font-weight: 500; font-family: var(--font-display); letter-spacing: var(--tr-snug); }
  .ticket-total {
    margin-top: var(--sp-4);
    border-top: 1px dashed var(--c-ink-300);
    padding-top: var(--sp-4);
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .ticket-total .label { font-size: 10px; color: var(--c-ink-500); text-transform: uppercase; letter-spacing: var(--tr-wider); }
  .ticket-total .amount { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); color: var(--c-blue-700); }

  /* Pictos demo */
  .picto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1px;
    background: var(--c-bone-300);
    border: var(--bd-hairline);
  }
  .picto-cell {
    background: var(--c-bone-50);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    color: var(--c-blue-700);
    transition: var(--tr-base);
  }
  .picto-cell:hover { background: var(--c-blue-50); }
  .picto-cell svg { width: 36px; height: 36px; }
  .picto-cell .name { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); }

  /* Forms */
  .field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .field label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-ink-700); }
  .field input, .field select, .field textarea {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    padding: 12px 14px;
    border: 1.5px solid var(--c-ink-100);
    border-radius: var(--r-sm);
    background: var(--c-bone-50);
    color: var(--c-ink-900);
    transition: var(--tr-fast);
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--c-blue-700);
    box-shadow: 0 0 0 3px rgba(29, 107, 179, 0.15);
  }

  /* Badge */
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-sm);
  }
  .badge-blue   { background: var(--c-blue-100); color: var(--c-blue-800); }
  .badge-orange { background: var(--c-orange-100); color: var(--c-orange-700); }
  .badge-green  { background: var(--c-green-100); color: var(--c-green-600); }
  .badge-red    { background: var(--c-red-100); color: var(--c-red-700); }
  .badge-out    { background: transparent; color: var(--c-ink-700); border: 1px solid var(--c-ink-100); }

  /* Footer DS */
  .ds-footer {
    border-top: var(--bd-hairline);
    margin-top: var(--sp-24);
    padding-top: var(--sp-8);
    color: var(--c-ink-500);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tr-wide);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }

  /* Token table */
  .tokens-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
  }
  .tokens-table th, .tokens-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: var(--bd-hairline);
  }
  .tokens-table th {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--c-ink-500);
  }
  .tokens-table td.preview { width: 80px; }


/* =========================================================================
   Homepage.html
   ========================================================================= */
/* ========== Tweak vars ========== */
  :root {
    --hero-variant: 1; /* tweakable */
  }

  /* ========== Layout shell ========== */
  body { background: var(--c-bone-50); }

  /* ===== Annonce bar ===== */
  .annonce {
    background: var(--c-ink-900);
    color: var(--c-bone-100);
    padding: 9px 20px;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    letter-spacing: var(--tr-snug);
    position: sticky; top: 0; z-index: 60;
  }
  .annonce .dot { width:8px; height:8px; background: var(--c-red-600); border-radius:50%; animation: blink 1.6s infinite; flex-shrink: 0; }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-decoration: none; }
  .annonce a:hover { color: var(--c-orange-600); }
  @media (max-width: 640px) { .annonce { font-size: 12px; } .annonce .hide-sm { display:none; } }

  /* ===== Header ===== */
  .header {
    position: sticky; top: 36px; z-index: 50;
    background: rgba(251, 250, 246, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: var(--bd-hairline);
  }
  .header .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-4) 0;
  }
  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    color: var(--c-ink-900);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: var(--tr-tight);
  }
  .logo::before {
    content: "";
    width: 22px; height: 22px;
    background: var(--c-blue-700);
    position: relative;
    display: inline-block;
    border-radius: 2px;
    box-shadow: 4px 4px 0 var(--c-orange-600);
  }
  .logo small {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    margin-left: 4px;
  }
  .nav { display: flex; align-items: center; gap: var(--sp-8); }
  .nav a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--c-ink-700);
    letter-spacing: var(--tr-snug);
    text-decoration: none;
    transition: var(--tr-fast);
  }
  .nav a:hover { color: var(--c-blue-700); }
  .header .tel-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-ink-900);
    text-decoration: none;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-snug);
  }
  .header .tel-cta svg { color: var(--c-blue-700); }
  .header .tel-cta:hover { color: var(--c-blue-700); }
  @media (max-width: 1023px) {
    .nav { display: none; }
  }
  @media (max-width: 640px) {
    .header .tel-cta span.label { display: none; }
  }

  /* =========================================
     HERO — éditorial avec asymétrie + ticket
     ========================================= */
  .hero {
    padding: clamp(48px, 8vw, 96px) 0 clamp(48px, 7vw, 80px);
    position: relative;
    overflow: hidden;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-12);
    align-items: center;
  }
  @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); } }

  .hero-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    margin-bottom: var(--sp-8);
  }
  .hero-meta::before {
    content: "";
    width: 32px; height: 1px;
    background: var(--c-blue-700);
  }
  .hero-meta strong { color: var(--c-blue-700); font-weight: 500; }
  .hero-meta .sep { color: var(--c-ink-300); }

  .hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-8);
  }
  .hero h1 em {
    font-style: normal;
    color: var(--c-blue-700);
    position: relative;
    display: inline-block;
  }
  .hero h1 em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    height: 8px;
    background: var(--c-orange-600);
    opacity: 0.25;
    z-index: -1;
  }
  .hero-lead {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--c-ink-700);
    max-width: 50ch;
    margin-bottom: var(--sp-10);
  }
  .hero-cta {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-10);
  }
  .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    border-top: var(--bd-hairline);
    padding-top: var(--sp-5);
  }
  .hero-tags span { display: inline-flex; align-items: center; gap: 6px; }
  .hero-tags .pill { width:8px; height:8px; background: var(--c-blue-700); border-radius: 50%; }

  /* Hero visuel — composé : photo placeholder + ticket overlay */
  .hero-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    max-width: 520px;
    margin-inline-start: auto;
  }
  .hero-photo {
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        135deg,
        var(--c-blue-50) 0,
        var(--c-blue-50) 14px,
        var(--c-blue-100) 14px,
        var(--c-blue-100) 15px
      );
    border: 1px solid var(--c-blue-100);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--c-blue-700);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tr-wide);
    text-align: center;
    padding: var(--sp-8);
  }
  .hero-photo .label { display: block; margin-bottom: var(--sp-2); opacity: 0.7; }
  .hero-photo .desc { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tr-snug); color: var(--c-blue-800); }
  .hero-photo .meta { margin-top: var(--sp-4); opacity: 0.6; font-size: 10px; }

  .hero-photo svg.illus {
    width: 96px; height: 96px;
    color: var(--c-blue-700);
    margin-bottom: var(--sp-6);
    opacity: 0.7;
  }

  .hero-ticket {
    position: absolute;
    /* Card remontée pour couvrir les numéros de téléphone imprimés
       au dos du blouson (cohérence : un seul numéro affiché sur le site,
       celui paramétré dans les options PMD).
       top: 48% → le haut de la card commence à mi-hauteur du visuel,
       donc la card s'étend de Y=48% à Y=~85%, couvrant entièrement
       la zone des deux téléphones (Y=55-72%). */
    top: 48%; bottom: auto; left: -32px;
    background: var(--c-bone-50);
    border: 1.5px solid var(--c-ink-900);
    padding: var(--sp-5) var(--sp-6);
    width: 280px;
    font-family: var(--font-mono);
    font-size: 12px;
    box-shadow: var(--sh-md);
    transform: rotate(-1.5deg);
  }
  .hero-ticket-head {
    display: flex; justify-content: space-between;
    border-bottom: 1px dashed var(--c-ink-300);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3);
    color: var(--c-blue-700);
    letter-spacing: var(--tr-wide);
  }
  .hero-ticket-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    margin: 4px 0;
    color: var(--c-ink-500);
  }
  .hero-ticket-row .v {
    color: var(--c-ink-900);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: var(--tr-snug);
    font-size: 13px;
  }
  .hero-ticket-status {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--c-ink-300);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-green-600);
    font-size: 12px;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
  }
  .hero-ticket-status::before {
    content: "";
    width: 8px; height: 8px;
    background: var(--c-green-600);
    border-radius: 50%;
    animation: blink 2s infinite;
  }
  @media (max-width: 640px) {
    /* Remonté sur mobile pour cacher les numéros de téléphone imprimés
       sur le dos du blouson (RGPD client + cohérence : un seul numéro
       affiché sur le site). Card placée à ~38% du haut → couvre la zone
       du 06 11... sans masquer le logo PMD-GAZ ni le visage. */
    .hero-ticket { left: var(--sp-3); bottom: auto; top: 42%; width: 240px; }
  }

  /* Hero variants via CSS */
  body[data-hero="2"] .hero {
    background:
      radial-gradient(circle at 100% 0%, var(--c-blue-50), transparent 60%),
      var(--c-bone-50);
  }
  body[data-hero="2"] .hero h1 em::after { background: var(--c-blue-700); opacity: 0.15; }

  body[data-hero="3"] .hero {
    background: var(--c-ink-900);
    color: var(--c-bone-100);
  }
  body[data-hero="3"] .hero h1 { color: var(--c-bone-50); }
  body[data-hero="3"] .hero h1 em { color: var(--c-orange-500); }
  body[data-hero="3"] .hero h1 em::after { background: var(--c-orange-600); opacity: 0.4; }
  body[data-hero="3"] .hero-lead { color: var(--c-blue-300); }
  body[data-hero="3"] .hero-meta { color: var(--c-blue-300); }
  body[data-hero="3"] .hero-meta strong { color: var(--c-orange-500); }
  body[data-hero="3"] .hero-meta::before { background: var(--c-orange-500); }
  body[data-hero="3"] .hero-tags { color: var(--c-blue-300); border-top-color: rgba(255,255,255,0.1); }
  body[data-hero="3"] .hero-tags .pill { background: var(--c-orange-500); }
  body[data-hero="3"] .hero-photo {
    background: repeating-linear-gradient(135deg, var(--c-blue-900) 0, var(--c-blue-900) 14px, var(--c-blue-800) 14px, var(--c-blue-800) 15px);
    border-color: var(--c-blue-800);
    color: var(--c-blue-300);
  }
  body[data-hero="3"] .hero-photo .desc { color: var(--c-bone-50); }
  body[data-hero="3"] .hero-photo svg.illus { color: var(--c-blue-300); }
  body[data-hero="3"] .btn-secondary { color: var(--c-bone-50); border-color: var(--c-bone-50); }
  body[data-hero="3"] .btn-secondary:hover { background: var(--c-bone-50); color: var(--c-ink-900); }

  /* ============ Trust strip ============ */
  .trust {
    background: var(--c-bone-100);
    border-block: var(--bd-hairline);
    padding: var(--sp-10) 0;
  }
  .trust-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-4);
  }
  @media (max-width: 1023px) { .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-4); } }
  @media (max-width: 480px)  { .trust-grid { grid-template-columns: repeat(2, 1fr); } }

  .kpi {
    border-left: 2px solid var(--c-blue-700);
    padding: 4px 0 4px var(--sp-5);
  }
  .kpi .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-tight);
    line-height: 1;
    color: var(--c-ink-900);
  }
  .kpi .num em { font-style: normal; color: var(--c-blue-700); }
  .kpi .label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    margin-top: var(--sp-2);
    line-height: 1.4;
  }

  /* ============ Sections génériques ============ */
  .section { padding: clamp(72px, 10vw, 128px) 0; }
  .section-alt { background: var(--c-bone-100); border-block: var(--bd-hairline); }

  .section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-8);
    margin-bottom: var(--sp-16);
    align-items: end;
    padding-bottom: var(--sp-8);
    border-bottom: var(--bd-hairline);
  }
  @media (max-width: 768px) {
    .section-head { grid-template-columns: 1fr; }
  }

  .section-head h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    max-width: 16ch;
  }
  .section-head .meta {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    line-height: 1.8;
  }
  @media (max-width: 768px) { .section-head .meta { text-align: left; } }
  .section-head .meta strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }

  /* ============ Services grid ============ */
  .svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: var(--bd-hairline);
    border-left: var(--bd-hairline);
  }
  @media (max-width: 1023px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px)  { .svc-grid { grid-template-columns: 1fr; } }

  .svc {
    border-right: var(--bd-hairline);
    border-bottom: var(--bd-hairline);
    padding: var(--sp-8);
    background: var(--c-bone-50);
    transition: var(--tr-base);
    cursor: pointer;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--sp-5);
    min-height: 320px;
    position: relative;
  }
  .svc:hover { background: var(--c-bone-100); }
  .svc::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0 solid var(--c-blue-700);
    pointer-events: none;
    transition: var(--tr-base);
  }
  .svc:hover::after { border-width: 2px; }
  .svc-ref {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wider);
  }
  .svc-ref .num { color: var(--c-blue-700); }
  .svc svg.icon {
    width: 56px; height: 56px;
    color: var(--c-blue-700);
    margin-block: var(--sp-2);
  }
  .svc h3 {
    font-size: 1.5rem;
    letter-spacing: var(--tr-snug);
    margin-bottom: var(--sp-2);
  }
  .svc p {
    font-size: var(--fs-sm);
    color: var(--c-ink-500);
    line-height: 1.6;
  }
  .svc-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--sp-5);
    border-top: var(--bd-hairline);
  }
  .svc-foot .from {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
  }
  .svc-foot .price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.625rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-snug);
  }
  .svc-foot .price small { font-size: var(--fs-sm); color: var(--c-ink-500); font-weight: 500; }
  .svc-foot .arrow {
    color: var(--c-blue-700);
    transition: var(--tr-base);
    transform: translateX(0);
  }
  .svc:hover .svc-foot .arrow { transform: translateX(4px); }

  /* ============ Anatomie ============ */
  .anatomie {
    background: var(--c-blue-700);
    color: var(--c-bone-50);
    padding: clamp(72px, 10vw, 128px) 0;
    position: relative;
    overflow: hidden;
  }
  .anatomie::before {
    content: "INT-2026";
    position: absolute;
    top: 40px; right: -20px;
    font-family: var(--font-mono);
    font-size: clamp(8rem, 18vw, 18rem);
    font-weight: 500;
    color: rgba(255,255,255,0.04);
    letter-spacing: -0.05em;
    line-height: 1;
    pointer-events: none;
  }
  .anatomie .section-head { border-color: rgba(255,255,255,0.15); }
  .anatomie .section-head h2 { color: var(--c-bone-50); }
  .anatomie .section-head .meta { color: var(--c-blue-300); }
  .anatomie .section-head .meta strong { color: var(--c-bone-50); }

  .ana-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
  }
  @media (max-width: 1023px) { .ana-steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px)  { .ana-steps { grid-template-columns: 1fr; } }

  .ana-step {
    padding: var(--sp-8) var(--sp-6) var(--sp-8) 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    position: relative;
  }
  .ana-step::before {
    content: "";
    position: absolute;
    top: -5px; left: 0;
    width: 9px; height: 9px;
    background: var(--c-orange-600);
    border-radius: 50%;
  }
  .ana-step .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: var(--tr-tight);
    color: var(--c-orange-500);
    margin-bottom: var(--sp-5);
  }
  .ana-step h3 {
    color: var(--c-bone-50);
    font-size: var(--fs-lg);
    letter-spacing: var(--tr-snug);
    margin-bottom: var(--sp-3);
  }
  .ana-step p {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--c-blue-300);
  }
  .ana-step .duree {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-bone-50);
    letter-spacing: var(--tr-wide);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255,255,255,0.15);
    text-transform: uppercase;
    opacity: 0.8;
  }

  /* ============ Signature 1990€ ============ */
  .signature {
    padding: clamp(72px, 10vw, 128px) 0;
    background: var(--c-bone-50);
  }
  .sig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
  }
  @media (max-width: 900px) { .sig-grid { grid-template-columns: 1fr; } }

  .sig-eyebrow {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: var(--c-orange-700);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
  }
  .sig-eyebrow::before {
    content: "OFFRE 01";
    font-family: var(--font-mono);
    color: var(--c-ink-500);
    border: 1px solid var(--c-ink-100);
    padding: 3px 8px;
    border-radius: 2px;
  }
  .signature h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-6);
  }
  .signature h2 .price {
    color: var(--c-orange-700);
    font-variant-numeric: tabular-nums;
    display: block;
  }
  .signature h2 .price small { font-size: 0.4em; vertical-align: top; font-weight: 600; color: var(--c-ink-500); display: inline-block; margin-top: 0.5em; }
  .signature h2 .price small.price-from {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.22em;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--c-ink-500);
    margin: 0 0 0.2em 0;
    font-weight: 500;
  }
  .signature .lead {
    font-size: var(--fs-md);
    color: var(--c-ink-700);
    line-height: 1.6;
    margin-bottom: var(--sp-8);
    max-width: 50ch;
  }
  .sig-specs {
    border-top: var(--bd-hairline);
    margin-bottom: var(--sp-8);
  }
  .sig-spec-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--sp-6);
    padding: var(--sp-4) 0;
    border-bottom: var(--bd-hairline);
    font-size: var(--fs-sm);
  }
  .sig-spec-row .k {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
  }
  .sig-spec-row .v {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: var(--tr-snug);
    color: var(--c-ink-900);
  }

  .sig-incl {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3) var(--sp-6);
  }
  .sig-incl li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: var(--sp-3);
    align-items: start;
    font-size: var(--fs-sm);
    color: var(--c-ink-700);
    line-height: 1.4;
  }
  .sig-incl svg { color: var(--c-blue-700); margin-top: 2px; }

  .sig-visual {
    aspect-ratio: 1 / 1.1;
    position: relative;
    background: var(--c-bone-100);
    border: var(--bd-hairline);
    overflow: hidden;
  }
  .sig-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        135deg,
        var(--c-bone-100) 0,
        var(--c-bone-100) 16px,
        var(--c-bone-200) 16px,
        var(--c-bone-200) 17px
      );
  }
  .sig-visual-illus {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-blue-700);
  }
  .sig-visual-illus svg { width: 40%; height: 40%; }
  .sig-visual-tag {
    position: absolute;
    top: var(--sp-6); left: var(--sp-6);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    background: var(--c-bone-50);
    border: var(--bd-hairline);
    padding: 4px 10px;
  }
  .sig-visual-tag strong { color: var(--c-ink-900); font-family: var(--font-display); font-size: 11px; }
  .sig-visual-overlay {
    position: absolute;
    bottom: var(--sp-6); right: var(--sp-6);
    background: var(--c-ink-900);
    color: var(--c-bone-50);
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
  }
  .sig-visual-overlay strong {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--c-orange-500);
    letter-spacing: 0;
    margin-top: 2px;
    text-transform: none;
  }

  /* ============ Carte IDF ============ */
  .zones {
    padding: clamp(72px, 10vw, 128px) 0;
    background: var(--c-bone-100);
    border-block: var(--bd-hairline);
  }
  .zones-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-12);
    align-items: start;
  }
  @media (max-width: 1023px) { .zones-grid { grid-template-columns: 1fr; } }

  .map-wrap {
    background: var(--c-bone-50);
    border: var(--bd-hairline);
    padding: var(--sp-8);
    position: relative;
  }
  .map-wrap svg.idf {
    width: 100%;
    height: auto;
    display: block;
  }
  .map-dept {
    fill: var(--c-blue-100);
    stroke: var(--c-bone-50);
    stroke-width: 2;
    transition: fill var(--tr-base);
    cursor: pointer;
  }
  .map-dept:hover { fill: var(--c-blue-700); }
  .map-dept.active { fill: var(--c-blue-700); }
  .map-paris { fill: var(--c-blue-800); }
  .map-paris:hover { fill: var(--c-orange-600); }
  .map-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--c-blue-800);
    letter-spacing: 0.04em;
    pointer-events: none;
    text-anchor: middle;
  }
  .map-label-light { fill: var(--c-bone-50); }

  .map-legend {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: var(--bd-hairline);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
  }

  .dept-list { display: flex; flex-direction: column; }
  .dept-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: var(--sp-4);
    align-items: baseline;
    padding: var(--sp-4) 0;
    border-bottom: var(--bd-hairline);
    transition: var(--tr-fast);
    cursor: pointer;
  }
  .dept-row:first-child { border-top: var(--bd-hairline); }
  .dept-row:hover { background: var(--c-bone-50); padding-inline: var(--sp-2); }
  .dept-row .code {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-blue-700);
    letter-spacing: var(--tr-wide);
  }
  .dept-row .name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-md);
    letter-spacing: var(--tr-snug);
    color: var(--c-ink-900);
  }
  .dept-row .name small {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--c-ink-500);
    margin-top: 2px;
    letter-spacing: 0;
  }
  .dept-row .arrow {
    color: var(--c-ink-300);
    transition: var(--tr-fast);
  }
  .dept-row:hover .arrow { color: var(--c-blue-700); transform: translateX(4px); }

  /* ============ Avis ============ */
  .avis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }
  @media (max-width: 1023px) { .avis-grid { grid-template-columns: 1fr; } }

  .quote {
    background: var(--c-bone-50);
    border: var(--bd-hairline);
    padding: var(--sp-10) var(--sp-8) var(--sp-8);
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .quote::before {
    content: "\201C";
    position: absolute;
    top: 8px; left: 24px;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 96px;
    line-height: 1;
    color: var(--c-blue-700);
  }
  .quote blockquote {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: var(--tr-snug);
    margin: var(--sp-8) 0 var(--sp-8);
    color: var(--c-ink-900);
    flex: 1;
  }
  .quote cite {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--c-ink-500);
    border-top: var(--bd-hairline);
    padding-top: var(--sp-4);
  }
  .quote cite strong {
    color: var(--c-ink-900);
    font-family: var(--font-display);
    font-weight: 600;
    display: block;
    font-size: var(--fs-md);
    letter-spacing: var(--tr-snug);
  }
  .quote cite .meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-300);
    letter-spacing: var(--tr-wide);
    margin-top: 4px;
    text-transform: uppercase;
  }
  .quote .stars { color: var(--c-orange-600); display: inline-flex; gap: 2px; }
  .quote .stars svg { width: 14px; height: 14px; }

  /* ============ À propos express ============ */
  .apropos {
    padding: clamp(72px, 10vw, 128px) 0;
    background: var(--c-bone-50);
  }
  .apropos-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }
  @media (max-width: 900px) { .apropos-grid { grid-template-columns: 1fr; } }

  .apropos h2 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .apropos-photo {
    aspect-ratio: 4/5;
    background: repeating-linear-gradient(135deg, var(--c-bone-100) 0, var(--c-bone-100) 14px, var(--c-bone-200) 14px, var(--c-bone-200) 15px);
    border: var(--bd-hairline);
    display: flex;
    align-items: end;
    padding: var(--sp-6);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    position: relative;
  }
  .apropos-photo .ph-tag {
    background: var(--c-bone-50);
    border: var(--bd-hairline);
    padding: 4px 10px;
  }
  .apropos-text > p {
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--c-ink-700);
    margin-top: var(--sp-6);
    max-width: 60ch;
  }
  .apropos-text > p strong { color: var(--c-ink-900); font-weight: 500; }

  .certifs {
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: var(--bd-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--r-sm);
  }
  .badge-blue   { background: var(--c-blue-100); color: var(--c-blue-800); }
  .badge-out    { background: transparent; color: var(--c-ink-700); border: 1px solid var(--c-ink-100); }
  .badge-green  { background: var(--c-green-100); color: var(--c-green-600); }

  /* ============ Final CTA ============ */
  .final-cta {
    background: var(--c-blue-900);
    color: var(--c-bone-50);
    padding: clamp(72px, 10vw, 128px) 0;
    position: relative;
    overflow: hidden;
  }
  .final-cta::before {
    content: "06.67.58.13.77";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: clamp(6rem, 14vw, 14rem);
    font-weight: 500;
    color: rgba(255,255,255,0.04);
    letter-spacing: -0.04em;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
  }
  .final-cta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-10);
    align-items: end;
  }
  @media (max-width: 768px) { .final-cta-inner { grid-template-columns: 1fr; } }

  .final-cta h2 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--c-bone-50);
    max-width: 14ch;
  }
  .final-cta h2 em {
    font-style: normal;
    color: var(--c-orange-500);
  }
  .final-cta p {
    color: var(--c-blue-300);
    font-size: var(--fs-md);
    margin-top: var(--sp-5);
    max-width: 50ch;
  }
  .final-cta-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    align-items: stretch;
    min-width: 280px;
  }
  .final-cta-actions a.btn { justify-content: center; }
  .final-cta-actions .tel-big {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--c-bone-50);
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.2);
    padding: var(--sp-5) var(--sp-6);
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-snug);
    transition: var(--tr-base);
  }
  .final-cta-actions .tel-big:hover { border-color: var(--c-orange-500); color: var(--c-orange-500); }
  .final-cta-actions .tel-big small { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--c-blue-300); letter-spacing: var(--tr-wider); text-transform: uppercase; margin-bottom: 4px; }

  /* ============ Footer ============ */
  .footer {
    background: var(--c-ink-900);
    color: var(--c-bone-200);
    padding: var(--sp-16) 0 var(--sp-8);
    font-size: var(--fs-sm);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: var(--sp-10);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
  @media (max-width: 540px)  { .footer-grid { grid-template-columns: 1fr; } }

  .footer h4 {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: var(--c-blue-300);
    margin: 0 0 var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer ul a { color: var(--c-bone-200); text-decoration: none; transition: var(--tr-fast); }
  .footer ul a:hover { color: var(--c-orange-500); }

  .footer .brand-block .logo { color: var(--c-bone-50); margin-bottom: var(--sp-4); }
  .footer .brand-block p { color: var(--c-blue-300); line-height: 1.6; max-width: 28ch; margin-top: var(--sp-3); font-size: 13px; }
  .footer .brand-block .tel {
    margin-top: var(--sp-6);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--c-orange-500);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-snug);
  }

  .footer-bottom {
    margin-top: var(--sp-8);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
  }

  /* ============ Sticky mobile CTA ============ */
  .sticky-mobile {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 70;
    background: var(--c-bone-50);
    border-top: 1.5px solid var(--c-ink-900);
    padding: 10px 12px;
    gap: 8px;
    box-shadow: 0 -8px 20px -8px rgba(12,24,37,0.15);
  }
  .sticky-mobile a {
    flex: 1;
    text-align: center;
    padding: 14px 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .sticky-mobile .call { background: var(--c-red-600); color: var(--c-bone-50); }
  .sticky-mobile .quote-btn { background: var(--c-orange-600); color: #1a1000; }
  @media (max-width: 768px) {
    .sticky-mobile { display: flex; }
    body { padding-bottom: 70px; }
  }

  /* ============ Tweaks panel ============ */
  .tweaks {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 80;
    background: var(--c-bone-50);
    border: 1.5px solid var(--c-ink-900);
    padding: var(--sp-5);
    box-shadow: var(--sh-lg);
    max-width: 280px;
    font-family: var(--font-display);
    display: none;
  }
  .tweaks.open { display: block; }
  .tweaks h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tr-wider);
    margin: 0 0 var(--sp-4);
    color: var(--c-ink-900);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--sp-3);
    border-bottom: var(--bd-hairline);
  }
  .tweaks-close {
    background: none;
    border: 0;
    font-size: 16px;
    cursor: pointer;
    color: var(--c-ink-500);
    padding: 0; line-height: 1;
  }
  .tweak-row {
    margin-bottom: var(--sp-4);
  }
  .tweak-row .label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-500);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
  }
  .tweak-segment {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid var(--c-ink-100);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .tweak-segment button {
    background: var(--c-bone-50);
    border: 0;
    padding: 8px 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    color: var(--c-ink-700);
    border-right: 1px solid var(--c-ink-100);
    transition: var(--tr-fast);
  }
  .tweak-segment button:last-child { border-right: 0; }
  .tweak-segment button:hover { background: var(--c-blue-50); }
  .tweak-segment button.active { background: var(--c-ink-900); color: var(--c-bone-50); }
  .tweaks .desc {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--c-ink-500);
    line-height: 1.5;
    padding-top: var(--sp-3);
    border-top: var(--bd-hairline);
    margin-top: var(--sp-3);
  }


/* =========================================================================
   Page Service.html
   ========================================================================= */
body { background: var(--c-bone-50); }

  .annonce { background: var(--c-ink-900); color: var(--c-bone-100); padding: 9px 20px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); position: sticky; top: 0; z-index: 60; letter-spacing: var(--tr-snug); }
  .annonce .dot { width:8px; height:8px; background: var(--c-red-600); border-radius:50%; animation: blink 1.6s infinite; }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .annonce .hide-sm { display:none; } }

  .header { position: sticky; top: 36px; z-index: 50; background: rgba(251,250,246,0.92); backdrop-filter: blur(8px); border-bottom: var(--bd-hairline); }
  .header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-4) 0; }
  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-900); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: var(--tr-tight); text-decoration: none; }
  .logo::before { content:""; width:22px; height:22px; background: var(--c-blue-700); display:inline-block; border-radius:2px; box-shadow: 4px 4px 0 var(--c-orange-600); }
  .logo small { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-left: 4px; }
  .nav { display: flex; gap: var(--sp-8); }
  .nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; }
  .nav a:hover, .nav a.active { color: var(--c-blue-700); }
  .header .tel-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); font-size: var(--fs-md); font-variant-numeric: tabular-nums; text-decoration: none; }
  .header .tel-cta svg { color: var(--c-blue-700); }
  @media (max-width: 1023px) { .nav { display: none; } }
  @media (max-width: 640px) { .header .tel-cta span.label { display:none; } }

  .svc-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); background: var(--c-bone-50); }
  .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-10); }
  .breadcrumb a { color: var(--c-ink-500); text-decoration: none; }
  .breadcrumb a:hover { color: var(--c-blue-700); }
  .breadcrumb .sep { color: var(--c-ink-300); }
  .breadcrumb .current { color: var(--c-ink-900); }

  .svc-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-12); align-items: end; }
  @media (max-width: 1023px) { .svc-hero-grid { grid-template-columns: 1fr; } }

  .svc-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 0.98; letter-spacing: -0.03em; margin-bottom: var(--sp-6); }
  .svc-hero h1 em { font-style: normal; color: var(--c-blue-700); }
  .svc-hero .lead { font-size: var(--fs-md); color: var(--c-ink-700); line-height: 1.6; max-width: 52ch; margin-bottom: var(--sp-8); }
  .svc-hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); border-top: var(--bd-hairline); padding-top: var(--sp-6); }
  @media (max-width: 540px) { .svc-hero-meta { grid-template-columns: 1fr 1fr; } }
  .svc-hero-meta .item .k { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 4px; }
  .svc-hero-meta .item .v { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: var(--tr-snug); font-variant-numeric: tabular-nums; }

  .svc-hero-visual { aspect-ratio: 5/4; background: repeating-linear-gradient(135deg, var(--c-blue-50) 0, var(--c-blue-50) 14px, var(--c-blue-100) 14px, var(--c-blue-100) 15px); border: 1px solid var(--c-blue-100); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-8); text-align: center; color: var(--c-blue-700); position: relative; }
  .svc-hero-visual svg.illus { width: 25%; height: auto; opacity: 0.7; margin-bottom: var(--sp-5); }
  .svc-hero-visual .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); opacity: 0.7; margin-bottom: var(--sp-2); }
  .svc-hero-visual .desc { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--c-blue-800); letter-spacing: var(--tr-snug); }
  .svc-hero-tag { position: absolute; top: var(--sp-5); left: var(--sp-5); background: var(--c-bone-50); border: var(--bd-hairline); padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); }
  .svc-hero-tag strong { color: var(--c-blue-700); font-family: var(--font-display); font-weight: 700; }

  .section { padding: clamp(72px, 10vw, 112px) 0; }
  .section-alt { background: var(--c-bone-100); border-block: var(--bd-hairline); }

  .section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); margin-bottom: var(--sp-12); align-items: end; padding-bottom: var(--sp-6); border-bottom: var(--bd-hairline); }
  @media (max-width: 768px) { .section-head { grid-template-columns: 1fr; } }
  .section-head h2 { font-size: clamp(1.875rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
  .section-head .meta { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); line-height: 1.8; }
  @media (max-width: 768px) { .section-head .meta { text-align: left; } }
  .section-head .meta strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }

  .inclus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: var(--bd-hairline); border-left: var(--bd-hairline); }
  @media (max-width: 768px) { .inclus-grid { grid-template-columns: 1fr; } }
  .inclus-item { border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); padding: var(--sp-6) var(--sp-8); display: grid; grid-template-columns: 32px 1fr auto; gap: var(--sp-4); align-items: start; background: var(--c-bone-50); transition: var(--tr-fast); }
  .inclus-item:hover { background: var(--c-blue-50); }
  .inclus-item .num { font-family: var(--font-mono); font-size: 11px; color: var(--c-blue-700); letter-spacing: var(--tr-wide); padding-top: 3px; }
  .inclus-item .body h4 { font-size: var(--fs-md); margin: 0 0 4px; letter-spacing: var(--tr-snug); }
  .inclus-item .body p { font-size: var(--fs-sm); color: var(--c-ink-500); line-height: 1.55; }
  .inclus-item .check { color: var(--c-green-600); background: var(--c-green-100); border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }

  .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  @media (max-width: 768px) { .price-grid { grid-template-columns: 1fr; } }
  .price-card { background: var(--c-bone-50); border: 1.5px solid var(--c-ink-100); padding: var(--sp-8); position: relative; }
  .price-card.featured { border-color: var(--c-blue-700); background: var(--c-blue-700); color: var(--c-bone-50); }
  .price-card .ribbon { position: absolute; top: -12px; left: var(--sp-6); background: var(--c-orange-600); color: #1a1000; font-family: var(--font-display); font-size: 11px; font-weight: 700; padding: 4px 10px; letter-spacing: var(--tr-wide); text-transform: uppercase; }
  .price-card .ref { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-3); }
  .price-card.featured .ref { color: var(--c-blue-300); }
  .price-card h3 { font-size: 1.5rem; letter-spacing: var(--tr-snug); margin-bottom: var(--sp-2); }
  .price-card .sub { font-size: var(--fs-sm); color: var(--c-ink-500); margin-bottom: var(--sp-6); }
  .price-card.featured .sub { color: var(--c-blue-300); }
  .price-card .amount { font-family: var(--font-display); font-weight: 800; font-size: 3.5rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); margin-bottom: var(--sp-2); }
  .price-card .amount small { font-size: 0.4em; vertical-align: top; font-weight: 600; color: var(--c-ink-500); }
  .price-card.featured .amount small { color: var(--c-blue-300); }
  .price-card .amount-meta { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: var(--bd-hairline); }
  .price-card.featured .amount-meta { color: var(--c-blue-300); border-bottom-color: rgba(255,255,255,0.15); }
  .price-card ul { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: flex; flex-direction: column; gap: 10px; }
  .price-card ul li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--fs-sm); line-height: 1.5; align-items: start; }
  .price-card ul li svg { color: var(--c-blue-700); margin-top: 2px; }
  .price-card.featured ul li svg { color: var(--c-orange-500); }

  .loi-block { background: var(--c-blue-50); border-left: 3px solid var(--c-blue-700); padding: var(--sp-10); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-10); align-items: center; }
  @media (max-width: 768px) { .loi-block { grid-template-columns: 1fr; } }
  .loi-block .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 9vw, 8rem); line-height: 1; color: var(--c-blue-700); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); }
  .loi-block .num small { font-size: 0.25em; display: block; color: var(--c-ink-500); font-weight: 500; letter-spacing: var(--tr-wide); margin-top: 8px; font-family: var(--font-mono); }
  .loi-block h3 { font-size: 1.5rem; margin-bottom: var(--sp-4); letter-spacing: var(--tr-snug); }
  .loi-block p { color: var(--c-ink-700); font-size: var(--fs-md); line-height: 1.6; max-width: 60ch; }
  .loi-block p + p { margin-top: var(--sp-3); }

  .process-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: var(--bd-hairline); }
  .process-row { display: grid; grid-template-columns: 80px 1fr 200px 120px; gap: var(--sp-6); align-items: baseline; padding: var(--sp-6) 0; border-bottom: var(--bd-hairline); }
  @media (max-width: 768px) { .process-row { grid-template-columns: 60px 1fr; row-gap: var(--sp-3); } .process-row .duree, .process-row .out { grid-column: 2; } }
  .process-row .step { font-family: var(--font-mono); font-size: 11px; color: var(--c-blue-700); letter-spacing: var(--tr-wide); }
  .process-row .titre { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--tr-snug); }
  .process-row .titre small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); color: var(--c-ink-500); margin-top: 4px; max-width: 50ch; }
  .process-row .duree { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
  .process-row .out { font-family: var(--font-mono); font-size: 10px; color: var(--c-blue-700); letter-spacing: var(--tr-wide); text-transform: uppercase; text-align: right; }
  @media (max-width: 768px) { .process-row .out { text-align: left; } }

  .faq { border-top: 1.5px solid var(--c-ink-900); }
  .faq details { border-bottom: var(--bd-hairline); padding: var(--sp-6) 0; }
  .faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 50px 1fr 24px; gap: var(--sp-5); align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--tr-snug); color: var(--c-ink-900); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .num { font-family: var(--font-mono); font-size: 12px; color: var(--c-blue-700); font-weight: 500; letter-spacing: var(--tr-wide); }
  .faq summary .plus { color: var(--c-blue-700); transition: var(--tr-base); }
  .faq details[open] summary .plus { transform: rotate(45deg); }
  .faq details > div { margin-top: var(--sp-4); padding-left: 70px; padding-right: 32px; color: var(--c-ink-700); font-size: var(--fs-md); line-height: 1.65; max-width: 70ch; }
  @media (max-width: 640px) { .faq details > div { padding-left: 0; } }

  .zone-block { background: var(--c-ink-900); color: var(--c-bone-100); padding: clamp(48px, 7vw, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center; }
  @media (max-width: 900px) { .zone-block { grid-template-columns: 1fr; padding: var(--sp-10); } }
  .zone-block h3 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--c-bone-50); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: var(--sp-5); }
  .zone-block p { color: var(--c-blue-300); line-height: 1.6; }
  .zone-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .zone-list a { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.2); color: var(--c-bone-100); text-decoration: none; letter-spacing: var(--tr-snug); }
  .zone-list a:hover { background: var(--c-blue-700); border-color: var(--c-blue-700); color: var(--c-bone-50); }

  .cta-final { background: var(--c-orange-600); padding: clamp(56px, 8vw, 96px) 0; color: #1a1000; }
  .cta-final .inner { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); align-items: center; }
  @media (max-width: 768px) { .cta-final .inner { grid-template-columns: 1fr; } }
  .cta-final h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: #1a1000; max-width: 18ch; }
  .cta-final p { color: rgba(26,16,0,0.7); margin-top: var(--sp-3); font-size: var(--fs-md); max-width: 50ch; }
  .cta-final .actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .cta-final .btn-secondary { color: #1a1000; border-color: #1a1000; background: transparent; }
  .cta-final .btn-secondary:hover { background: #1a1000; color: var(--c-orange-500); }
  .cta-final .btn-dark { background: var(--c-ink-900); color: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); }
  .cta-final .btn-dark:hover { background: transparent; color: var(--c-ink-900); }

  .footer { background: var(--c-ink-900); color: var(--c-bone-200); padding: var(--sp-12) 0 var(--sp-6); font-size: var(--fs-sm); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.1); }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
  @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-blue-300); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer ul a { color: var(--c-bone-200); text-decoration: none; }
  .footer ul a:hover { color: var(--c-orange-500); }
  .footer .brand-block .logo { color: var(--c-bone-50); margin-bottom: var(--sp-3); }
  .footer .brand-block p { color: var(--c-blue-300); line-height: 1.6; max-width: 28ch; margin: var(--sp-3) 0; font-size: 13px; }
  .footer .brand-block .tel { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--c-orange-500); text-decoration: none; font-variant-numeric: tabular-nums; }
  .footer-bottom { margin-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }

  .sticky-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--c-bone-50); border-top: 1.5px solid var(--c-ink-900); padding: 10px 12px; gap: 8px; }
  .sticky-mobile a { flex: 1; text-align: center; padding: 14px 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .sticky-mobile .call { background: var(--c-red-600); color: var(--c-bone-50); }
  .sticky-mobile .quote-btn { background: var(--c-orange-600); color: #1a1000; }
  @media (max-width: 768px) { .sticky-mobile { display: flex; } body { padding-bottom: 70px; } }


/* =========================================================================
   Zone Hub Paris.html
   ========================================================================= */
body { background: var(--c-bone-50); }

  /* Annonce + header (réutilisé) */
  .annonce { background: var(--c-ink-900); color: var(--c-bone-100); padding: 9px 20px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); position: sticky; top: 0; z-index: 60; letter-spacing: var(--tr-snug); }
  .annonce .dot { width:8px; height:8px; background: var(--c-red-600); border-radius:50%; animation: blink 1.6s infinite; }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .annonce .hide-sm { display:none; } }

  .header { position: sticky; top: 36px; z-index: 50; background: rgba(251,250,246,0.92); backdrop-filter: blur(8px); border-bottom: var(--bd-hairline); }
  .header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-4) 0; }
  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-900); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: var(--tr-tight); text-decoration: none; }
  .logo::before { content:""; width:22px; height:22px; background: var(--c-blue-700); display:inline-block; border-radius:2px; box-shadow: 4px 4px 0 var(--c-orange-600); }
  .logo small { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-left: 4px; }
  .nav { display: flex; gap: var(--sp-8); }
  .nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; }
  .nav a:hover, .nav a.active { color: var(--c-blue-700); }
  .header .tel-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); font-size: var(--fs-md); font-variant-numeric: tabular-nums; text-decoration: none; }
  .header .tel-cta svg { color: var(--c-blue-700); }
  @media (max-width: 1023px) { .nav { display: none; } }
  @media (max-width: 640px) { .header .tel-cta span.label { display:none; } }

  /* ====== Zone hero ====== */
  .zh-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); background: var(--c-blue-50); position: relative; border-bottom: var(--bd-hairline); overflow: hidden; }
  .zh-hero::before { content:""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 99px, rgba(29,107,179,0.05) 99px, rgba(29,107,179,0.05) 100px); pointer-events: none; }

  .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-10); position: relative; }
  .breadcrumb a { color: var(--c-ink-500); text-decoration: none; }
  .breadcrumb a:hover { color: var(--c-blue-700); }
  .breadcrumb .sep { color: var(--c-ink-300); }
  .breadcrumb .current { color: var(--c-ink-900); }

  .zh-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); align-items: end; position: relative; }
  @media (max-width: 1023px) { .zh-hero-grid { grid-template-columns: 1fr; } }

  .zh-hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.95; letter-spacing: -0.035em; margin-bottom: var(--sp-6); }
  .zh-hero h1 em { font-style: normal; color: var(--c-blue-700); }
  .zh-hero .lead { font-size: var(--fs-md); color: var(--c-ink-700); line-height: 1.6; max-width: 50ch; margin-bottom: var(--sp-8); }

  .zh-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1.5px solid var(--c-ink-900); border-left: var(--bd-hairline); }
  @media (max-width: 640px) { .zh-meta-grid { grid-template-columns: 1fr 1fr; } }
  .zh-meta-grid .item { padding: var(--sp-5); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); background: var(--c-bone-50); }
  .zh-meta-grid .k { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 6px; }
  .zh-meta-grid .v { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--c-ink-900); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
  .zh-meta-grid .v small { font-size: 0.55em; font-weight: 600; color: var(--c-ink-500); margin-left: 4px; }

  /* Visuel : carte 75 stylisée par arrondissements */
  .paris-map { aspect-ratio: 1/1; background: var(--c-bone-50); border: 1px solid var(--c-blue-100); padding: var(--sp-5); position: relative; box-shadow: var(--sh-md); }
  .paris-map svg { width: 100%; height: 100%; display: block; }
  .paris-map .legend-tag { position: absolute; top: var(--sp-4); left: var(--sp-4); background: var(--c-ink-900); color: var(--c-bone-50); padding: 6px 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tr-wide); }
  .paris-map .legend-bot { position: absolute; bottom: var(--sp-4); right: var(--sp-4); font-family: var(--font-mono); font-size: 9px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-align: right; line-height: 1.6; }

  .arr { fill: var(--c-blue-100); stroke: var(--c-bone-50); stroke-width: 1.5; transition: var(--tr-base); cursor: pointer; }
  .arr:hover { fill: var(--c-blue-700); }
  .arr-num { font-family: var(--font-mono); font-size: 8px; fill: var(--c-blue-800); font-weight: 600; pointer-events: none; }
  .arr.featured { fill: var(--c-blue-700); }
  .arr.featured + .arr-num { fill: var(--c-bone-50); }

  /* ====== Sections génériques ====== */
  .section { padding: clamp(72px, 10vw, 112px) 0; }
  .section-alt { background: var(--c-bone-100); border-block: var(--bd-hairline); }

  .section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); margin-bottom: var(--sp-12); align-items: end; padding-bottom: var(--sp-6); border-bottom: var(--bd-hairline); }
  @media (max-width: 768px) { .section-head { grid-template-columns: 1fr; } }
  .section-head h2 { font-size: clamp(1.875rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
  .section-head .meta { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); line-height: 1.8; }
  @media (max-width: 768px) { .section-head .meta { text-align: left; } }
  .section-head .meta strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }

  /* ====== Index 20 arrondissements ====== */
  .arr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1.5px solid var(--c-ink-900); border-left: var(--bd-hairline); }
  @media (max-width: 1023px) { .arr-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .arr-grid { grid-template-columns: 1fr; } }
  .arr-card { display: block; text-decoration: none; color: inherit; padding: var(--sp-6); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); background: var(--c-bone-50); transition: var(--tr-base); position: relative; }
  .arr-card:hover { background: var(--c-blue-700); color: var(--c-bone-50); }
  .arr-card .arr-num-card { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; letter-spacing: var(--tr-tight); color: var(--c-blue-700); margin-bottom: var(--sp-3); font-variant-numeric: tabular-nums; }
  .arr-card:hover .arr-num-card { color: var(--c-orange-500); }
  .arr-card .arr-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); letter-spacing: var(--tr-snug); margin-bottom: 4px; }
  .arr-card .arr-quartiers { font-family: var(--font-body); font-size: 12px; color: var(--c-ink-500); line-height: 1.5; }
  .arr-card:hover .arr-quartiers { color: var(--c-blue-300); }
  .arr-card .arr-arrow { position: absolute; top: var(--sp-6); right: var(--sp-6); color: var(--c-ink-300); transition: var(--tr-base); }
  .arr-card:hover .arr-arrow { color: var(--c-bone-50); transform: translate(2px, -2px); }

  /* ====== Tarifs Paris ====== */
  .tarif-table { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--c-ink-900); }
  .tarif-table th, .tarif-table td { text-align: left; padding: var(--sp-5) var(--sp-4); border-bottom: var(--bd-hairline); }
  .tarif-table th { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; font-weight: 500; padding-bottom: var(--sp-3); padding-top: var(--sp-3); background: var(--c-bone-100); }
  .tarif-table td { font-family: var(--font-display); font-size: var(--fs-base); }
  .tarif-table td.svc { font-weight: 700; }
  .tarif-table td.svc small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--c-ink-500); margin-top: 4px; }
  .tarif-table td.price { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c-blue-700); font-size: var(--fs-md); text-align: right; letter-spacing: var(--tr-tight); }
  .tarif-table td.delay { font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
  @media (max-width: 768px) {
    .tarif-table thead { display: none; }
    .tarif-table tr { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); padding: var(--sp-4) 0; border-bottom: var(--bd-hairline); }
    .tarif-table th, .tarif-table td { border: 0; padding: 0; }
    .tarif-table td.svc { grid-column: 1 / 3; }
    .tarif-table td.price { text-align: right; }
  }

  /* ====== Quartiers cibles ====== */
  .quartiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  @media (max-width: 900px) { .quartiers-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .quartiers-grid { grid-template-columns: 1fr; } }
  .quartier-card { background: var(--c-bone-50); border: var(--bd-hairline); padding: var(--sp-6); transition: var(--tr-fast); }
  .quartier-card:hover { border-color: var(--c-blue-700); }
  .quartier-card .qref { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-2); }
  .quartier-card h4 { font-size: var(--fs-md); margin-bottom: var(--sp-2); letter-spacing: var(--tr-snug); }
  .quartier-card p { font-size: 13px; color: var(--c-ink-500); line-height: 1.55; }

  /* ====== Témoignage Paris ====== */
  .quote-paris { background: var(--c-blue-700); color: var(--c-bone-50); padding: clamp(48px, 7vw, 80px); display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--sp-10); align-items: center; }
  @media (max-width: 768px) { .quote-paris { grid-template-columns: 1fr; padding: var(--sp-10); } }
  .quote-paris .ref { font-family: var(--font-mono); font-size: 10px; color: var(--c-blue-300); letter-spacing: var(--tr-wide); text-transform: uppercase; line-height: 1.8; }
  .quote-paris .ref strong { color: var(--c-bone-50); display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: var(--tr-snug); margin-top: 4px; }
  .quote-paris blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.5vw, 1.875rem); line-height: 1.3; letter-spacing: var(--tr-snug); margin: 0; color: var(--c-bone-50); }
  .quote-paris blockquote::before { content: "« "; color: var(--c-orange-500); }
  .quote-paris blockquote::after { content: " »"; color: var(--c-orange-500); }
  .quote-paris cite { display: block; margin-top: var(--sp-4); font-family: var(--font-mono); font-style: normal; font-size: 11px; color: var(--c-blue-300); letter-spacing: var(--tr-wide); text-transform: uppercase; }

  /* ====== Footer (réutilisé) ====== */
  .cta-final { background: var(--c-orange-600); padding: clamp(56px, 8vw, 96px) 0; color: #1a1000; }
  .cta-final .inner { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); align-items: center; }
  @media (max-width: 768px) { .cta-final .inner { grid-template-columns: 1fr; } }
  .cta-final h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: #1a1000; max-width: 18ch; }
  .cta-final p { color: rgba(26,16,0,0.7); margin-top: var(--sp-3); font-size: var(--fs-md); max-width: 50ch; }
  .cta-final .actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .cta-final .btn-secondary { color: #1a1000; border-color: #1a1000; background: transparent; }
  .cta-final .btn-secondary:hover { background: #1a1000; color: var(--c-orange-500); }
  .cta-final .btn-dark { background: var(--c-ink-900); color: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); }
  .cta-final .btn-dark:hover { background: transparent; color: var(--c-ink-900); }

  .footer { background: var(--c-ink-900); color: var(--c-bone-200); padding: var(--sp-12) 0 var(--sp-6); font-size: var(--fs-sm); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.1); }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
  @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-blue-300); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer ul a { color: var(--c-bone-200); text-decoration: none; }
  .footer ul a:hover { color: var(--c-orange-500); }
  .footer .brand-block .logo { color: var(--c-bone-50); margin-bottom: var(--sp-3); }
  .footer .brand-block p { color: var(--c-blue-300); line-height: 1.6; max-width: 28ch; margin: var(--sp-3) 0; font-size: 13px; }
  .footer .brand-block .tel { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--c-orange-500); text-decoration: none; font-variant-numeric: tabular-nums; }
  .footer-bottom { margin-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }

  .sticky-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--c-bone-50); border-top: 1.5px solid var(--c-ink-900); padding: 10px 12px; gap: 8px; }
  .sticky-mobile a { flex: 1; text-align: center; padding: 14px 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .sticky-mobile .call { background: var(--c-red-600); color: var(--c-bone-50); }
  .sticky-mobile .quote-btn { background: var(--c-orange-600); color: #1a1000; }
  @media (max-width: 768px) { .sticky-mobile { display: flex; } body { padding-bottom: 70px; } }


/* =========================================================================
   Landing Paris 16.html
   ========================================================================= */
body { background: var(--c-bone-50); }

  .annonce { background: var(--c-ink-900); color: var(--c-bone-100); padding: 9px 20px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); position: sticky; top: 0; z-index: 60; letter-spacing: var(--tr-snug); }
  .annonce .dot { width:8px; height:8px; background: var(--c-red-600); border-radius:50%; animation: blink 1.6s infinite; }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .annonce .hide-sm { display:none; } }

  .header { position: sticky; top: 36px; z-index: 50; background: rgba(251,250,246,0.92); backdrop-filter: blur(8px); border-bottom: var(--bd-hairline); }
  .header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-4) 0; }
  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-900); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: var(--tr-tight); text-decoration: none; }
  .logo::before { content:""; width:22px; height:22px; background: var(--c-blue-700); display:inline-block; border-radius:2px; box-shadow: 4px 4px 0 var(--c-orange-600); }
  .logo small { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-left: 4px; }
  .nav { display: flex; gap: var(--sp-8); }
  .nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; }
  .nav a:hover, .nav a.active { color: var(--c-blue-700); }
  .header .tel-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); font-size: var(--fs-md); font-variant-numeric: tabular-nums; text-decoration: none; }
  .header .tel-cta svg { color: var(--c-blue-700); }
  @media (max-width: 1023px) { .nav { display: none; } }
  @media (max-width: 640px) { .header .tel-cta span.label { display:none; } }

  /* ====== Local hero ====== */
  .l-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 72px); background: var(--c-bone-50); position: relative; }
  .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-10); }
  .breadcrumb a { color: var(--c-ink-500); text-decoration: none; }
  .breadcrumb a:hover { color: var(--c-blue-700); }
  .breadcrumb .sep { color: var(--c-ink-300); }
  .breadcrumb .current { color: var(--c-ink-900); }

  .l-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-12); align-items: center; }
  @media (max-width: 1023px) { .l-hero-grid { grid-template-columns: 1fr; } }

  .postal-stamp { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 8px 14px; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-900); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: var(--sp-6); }
  .postal-stamp::before { content: ""; width: 10px; height: 10px; background: var(--c-red-600); border-radius: 50%; }

  .l-hero h1 { font-size: clamp(2.5rem, 5.8vw, 4.75rem); line-height: 0.95; letter-spacing: -0.035em; margin-bottom: var(--sp-6); }
  .l-hero h1 em { font-style: normal; color: var(--c-blue-700); }
  .l-hero .lead { font-size: var(--fs-md); color: var(--c-ink-700); line-height: 1.6; max-width: 50ch; margin-bottom: var(--sp-8); }

  .l-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--bd-hairline); border-left: var(--bd-hairline); }
  @media (max-width: 540px) { .l-hero-stats { grid-template-columns: 1fr; } }
  .l-hero-stats .item { padding: var(--sp-5); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); }
  .l-hero-stats .k { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 6px; }
  .l-hero-stats .v { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--c-blue-700); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
  .l-hero-stats .v small { font-family: var(--font-body); font-size: 11px; color: var(--c-ink-500); font-weight: 400; display: block; margin-top: 2px; letter-spacing: 0; text-transform: none; }

  /* Carte 16e */
  .arr16-map { aspect-ratio: 1/1.05; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); padding: var(--sp-6); position: relative; }
  .arr16-map svg { width: 100%; height: 100%; display: block; }
  .arr16-map .map-tag { position: absolute; top: var(--sp-4); left: var(--sp-4); background: var(--c-blue-700); color: var(--c-bone-50); padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); }
  .arr16-map .map-bot { position: absolute; bottom: var(--sp-4); left: var(--sp-4); right: var(--sp-4); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); }
  .quartier-poly { fill: var(--c-blue-50); stroke: var(--c-blue-700); stroke-width: 1.2; transition: var(--tr-fast); }
  .quartier-poly:hover { fill: var(--c-blue-100); }
  .quartier-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; fill: var(--c-blue-800); letter-spacing: var(--tr-tight); text-transform: uppercase; pointer-events: none; }
  .quartier-sub { font-family: var(--font-mono); font-size: 7px; fill: var(--c-blue-700); letter-spacing: var(--tr-wide); pointer-events: none; }
  .seine-shape { fill: var(--c-blue-300); opacity: 0.4; }
  .bois-shape { fill: var(--c-green-100); }
  .bois-label { font-family: var(--font-mono); font-size: 8px; fill: var(--c-green-600); letter-spacing: var(--tr-wide); }

  .section { padding: clamp(72px, 10vw, 112px) 0; }
  .section-alt { background: var(--c-bone-100); border-block: var(--bd-hairline); }

  .section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); margin-bottom: var(--sp-12); align-items: end; padding-bottom: var(--sp-6); border-bottom: var(--bd-hairline); }
  @media (max-width: 768px) { .section-head { grid-template-columns: 1fr; } }
  .section-head h2 { font-size: clamp(1.875rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
  .section-head .meta { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); line-height: 1.8; }
  @media (max-width: 768px) { .section-head .meta { text-align: left; } }
  .section-head .meta strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }

  /* ====== Pourquoi nous, ici ====== */
  .why-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1.5px solid var(--c-ink-900); border-left: var(--bd-hairline); }
  @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
  .why-cell { padding: var(--sp-8); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); background: var(--c-bone-50); }
  .why-cell .num { font-family: var(--font-mono); font-size: 11px; color: var(--c-blue-700); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-5); }
  .why-cell h3 { font-size: 1.5rem; letter-spacing: var(--tr-snug); line-height: 1.1; margin-bottom: var(--sp-3); max-width: 18ch; }
  .why-cell p { color: var(--c-ink-700); font-size: var(--fs-sm); line-height: 1.65; }

  /* ====== Codes postaux ====== */
  .cp-list { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--c-ink-900); border-right: 0; border-bottom: 0; }
  .cp-cell { flex: 1 1 200px; padding: var(--sp-5) var(--sp-6); border-right: 1.5px solid var(--c-ink-900); border-bottom: 1.5px solid var(--c-ink-900); background: var(--c-bone-50); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: baseline; }
  .cp-cell .cp-code { font-family: var(--font-mono); font-size: 12px; color: var(--c-blue-700); font-weight: 500; letter-spacing: var(--tr-wide); }
  .cp-cell .cp-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--tr-snug); }
  .cp-cell .cp-name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--c-ink-500); margin-top: 4px; line-height: 1.5; }

  /* ====== Interventions récentes (timeline) ====== */
  .interv-list { display: flex; flex-direction: column; border-top: 1.5px solid var(--c-ink-900); }
  .interv-row { display: grid; grid-template-columns: 100px 1fr 220px 100px; gap: var(--sp-6); padding: var(--sp-5) 0; border-bottom: var(--bd-hairline); align-items: baseline; }
  @media (max-width: 900px) { .interv-row { grid-template-columns: 80px 1fr; row-gap: var(--sp-2); } .interv-row .interv-where, .interv-row .interv-rating { grid-column: 2; } }
  .interv-row .interv-date { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
  .interv-row .interv-titre { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--tr-snug); }
  .interv-row .interv-titre small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--c-ink-500); margin-top: 4px; }
  .interv-row .interv-where { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-700); letter-spacing: var(--tr-wide); }
  .interv-row .interv-where strong { color: var(--c-blue-700); display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-bottom: 2px; }
  .interv-row .interv-rating { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); }

  /* ====== Avis local ====== */
  .testimonials-local { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1.5px solid var(--c-ink-900); border-left: var(--bd-hairline); }
  @media (max-width: 768px) { .testimonials-local { grid-template-columns: 1fr; } }
  .testi-cell { padding: var(--sp-8); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); background: var(--c-bone-50); }
  .testi-cell .testi-meta { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; line-height: 1.7; margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: var(--bd-hairline); }
  .testi-cell .testi-meta strong { color: var(--c-ink-900); display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13px; }
  .testi-cell blockquote { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); line-height: 1.45; letter-spacing: var(--tr-snug); margin: 0; color: var(--c-ink-900); }
  .testi-cell .stars { font-family: var(--font-mono); color: var(--c-orange-600); font-size: 14px; margin-top: var(--sp-4); letter-spacing: 4px; }

  /* ====== Engagements 16e ====== */
  .engage-block { background: var(--c-blue-700); color: var(--c-bone-50); padding: clamp(48px, 7vw, 80px); }
  .engage-block h2 { color: var(--c-bone-50); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.025em; line-height: 1; max-width: 18ch; margin-bottom: var(--sp-10); }
  .engage-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.2); border-left: 1px solid rgba(255,255,255,0.2); }
  @media (max-width: 900px) { .engage-list { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .engage-list { grid-template-columns: 1fr; } }
  .engage-cell { padding: var(--sp-6); border-right: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); }
  .engage-cell .engage-num { font-family: var(--font-display); font-weight: 800; font-size: 3rem; color: var(--c-orange-500); line-height: 1; letter-spacing: var(--tr-tight); margin-bottom: var(--sp-3); font-variant-numeric: tabular-nums; }
  .engage-cell h4 { font-size: var(--fs-md); color: var(--c-bone-50); letter-spacing: var(--tr-snug); margin-bottom: var(--sp-2); }
  .engage-cell p { font-size: 13px; color: var(--c-blue-300); line-height: 1.6; }

  /* ====== CTA + Footer ====== */
  .cta-final { background: var(--c-orange-600); padding: clamp(56px, 8vw, 96px) 0; color: #1a1000; }
  .cta-final .inner { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); align-items: center; }
  @media (max-width: 768px) { .cta-final .inner { grid-template-columns: 1fr; } }
  .cta-final h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: #1a1000; max-width: 18ch; }
  .cta-final p { color: rgba(26,16,0,0.7); margin-top: var(--sp-3); font-size: var(--fs-md); max-width: 50ch; }
  .cta-final .actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .cta-final .btn-secondary { color: #1a1000; border-color: #1a1000; background: transparent; }
  .cta-final .btn-secondary:hover { background: #1a1000; color: var(--c-orange-500); }
  .cta-final .btn-dark { background: var(--c-ink-900); color: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); }
  .cta-final .btn-dark:hover { background: transparent; color: var(--c-ink-900); }

  .footer { background: var(--c-ink-900); color: var(--c-bone-200); padding: var(--sp-12) 0 var(--sp-6); font-size: var(--fs-sm); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.1); }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
  @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-blue-300); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer ul a { color: var(--c-bone-200); text-decoration: none; }
  .footer ul a:hover { color: var(--c-orange-500); }
  .footer .brand-block .logo { color: var(--c-bone-50); margin-bottom: var(--sp-3); }
  .footer .brand-block p { color: var(--c-blue-300); line-height: 1.6; max-width: 28ch; margin: var(--sp-3) 0; font-size: 13px; }
  .footer .brand-block .tel { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--c-orange-500); text-decoration: none; font-variant-numeric: tabular-nums; }
  .footer-bottom { margin-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }

  .sticky-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--c-bone-50); border-top: 1.5px solid var(--c-ink-900); padding: 10px 12px; gap: 8px; }
  .sticky-mobile a { flex: 1; text-align: center; padding: 14px 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .sticky-mobile .call { background: var(--c-red-600); color: var(--c-bone-50); }
  .sticky-mobile .quote-btn { background: var(--c-orange-600); color: #1a1000; }
  @media (max-width: 768px) { .sticky-mobile { display: flex; } body { padding-bottom: 70px; } }


/* =========================================================================
   A propos.html
   ========================================================================= */
body { background: var(--c-bone-50); }

  .annonce { background: var(--c-ink-900); color: var(--c-bone-100); padding: 9px 20px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); position: sticky; top: 0; z-index: 60; letter-spacing: var(--tr-snug); }
  .annonce .dot { width:8px; height:8px; background: var(--c-red-600); border-radius:50%; animation: blink 1.6s infinite; }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .annonce .hide-sm { display:none; } }

  .header { position: sticky; top: 36px; z-index: 50; background: rgba(251,250,246,0.92); backdrop-filter: blur(8px); border-bottom: var(--bd-hairline); }
  .header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-4) 0; }
  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-900); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: var(--tr-tight); text-decoration: none; }
  .logo::before { content:""; width:22px; height:22px; background: var(--c-blue-700); display:inline-block; border-radius:2px; box-shadow: 4px 4px 0 var(--c-orange-600); }
  .logo small { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-left: 4px; }
  .nav { display: flex; gap: var(--sp-8); }
  .nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; }
  .nav a:hover, .nav a.active { color: var(--c-blue-700); }
  .header .tel-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); font-size: var(--fs-md); font-variant-numeric: tabular-nums; text-decoration: none; }
  .header .tel-cta svg { color: var(--c-blue-700); }
  @media (max-width: 1023px) { .nav { display: none; } }
  @media (max-width: 640px) { .header .tel-cta span.label { display:none; } }

  .ap-hero { padding: clamp(48px, 7vw, 96px) 0; background: var(--c-bone-50); }
  .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-12); }
  .breadcrumb a { color: var(--c-ink-500); text-decoration: none; }
  .breadcrumb .sep { color: var(--c-ink-300); }
  .breadcrumb .current { color: var(--c-ink-900); }

  .ap-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
  @media (max-width: 1023px) { .ap-hero-grid { grid-template-columns: 1fr; } }

  .ap-hero h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: var(--sp-6); }
  .ap-hero h1 em { font-style: italic; font-family: "Times New Roman", Georgia, serif; color: var(--c-blue-700); font-weight: 500; }
  .ap-hero .lead { font-size: var(--fs-lg); color: var(--c-ink-700); line-height: 1.5; max-width: 38ch; margin-bottom: var(--sp-8); }
  .ap-hero .signature { font-family: "Times New Roman", Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--c-ink-700); }
  .ap-hero .signature strong { display: block; font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: 1.125rem; color: var(--c-ink-900); letter-spacing: var(--tr-snug); margin-top: 4px; }

  .portrait-frame { aspect-ratio: 4/5; background: repeating-linear-gradient(135deg, var(--c-blue-50) 0, var(--c-blue-50) 14px, var(--c-blue-100) 14px, var(--c-blue-100) 15px); border: 1px solid var(--c-blue-100); position: relative; padding: var(--sp-8); display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--sh-md); }
  .portrait-frame .ph-tag { position: absolute; top: var(--sp-5); left: var(--sp-5); background: var(--c-bone-50); padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); }
  .portrait-frame .ph-tag strong { color: var(--c-blue-700); font-family: var(--font-display); font-weight: 700; }
  .portrait-frame .ph-bubble { background: var(--c-bone-50); border: var(--bd-hairline); padding: var(--sp-5); }
  .portrait-frame .ph-bubble .label { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-2); }
  .portrait-frame .ph-bubble .desc { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--c-ink-900); line-height: 1.3; letter-spacing: var(--tr-snug); }

  .section { padding: clamp(72px, 10vw, 112px) 0; }
  .section-alt { background: var(--c-bone-100); border-block: var(--bd-hairline); }
  .section-dark { background: var(--c-ink-900); color: var(--c-bone-100); border-block: 1px solid var(--c-ink-900); }
  .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--c-bone-50); }

  .section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); margin-bottom: var(--sp-12); align-items: end; padding-bottom: var(--sp-6); border-bottom: var(--bd-hairline); }
  .section-dark .section-head { border-bottom-color: rgba(255,255,255,0.15); }
  @media (max-width: 768px) { .section-head { grid-template-columns: 1fr; } }
  .section-head h2 { font-size: clamp(1.875rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
  .section-head .meta { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); line-height: 1.8; }
  @media (max-width: 768px) { .section-head .meta { text-align: left; } }
  .section-head .meta strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }
  .section-dark .section-head .meta strong { color: var(--c-bone-50); }

  .histoire { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-12); align-items: start; }
  @media (max-width: 900px) { .histoire { grid-template-columns: 1fr; } }
  .histoire .left { position: sticky; top: 130px; }
  .histoire .left .pull { font-family: "Times New Roman", Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.3; color: var(--c-blue-700); padding-left: var(--sp-5); border-left: 2px solid var(--c-blue-700); }
  .histoire .right p { font-size: var(--fs-md); line-height: 1.7; color: var(--c-ink-700); max-width: 60ch; margin-bottom: var(--sp-5); }
  .histoire .right p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 800; font-size: 4em; line-height: 0.85; float: left; padding: 6px 10px 0 0; color: var(--c-blue-700); letter-spacing: var(--tr-tight); }
  .histoire .right p strong { color: var(--c-ink-900); font-weight: 600; }

  .timeline { display: grid; grid-template-columns: 1fr; border-top: 1.5px solid var(--c-ink-900); }
  .tl-row { display: grid; grid-template-columns: 100px 1fr 220px; gap: var(--sp-6); padding: var(--sp-6) 0; border-bottom: var(--bd-hairline); align-items: baseline; }
  @media (max-width: 768px) { .tl-row { grid-template-columns: 80px 1fr; row-gap: var(--sp-2); } .tl-row .tl-out { grid-column: 2; } }
  .tl-row .tl-year { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--c-blue-700); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
  .tl-row .tl-titre { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--tr-snug); }
  .tl-row .tl-titre small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); color: var(--c-ink-500); margin-top: 4px; max-width: 60ch; line-height: 1.6; }
  .tl-row .tl-out { font-family: var(--font-mono); font-size: 10px; color: var(--c-blue-700); letter-spacing: var(--tr-wide); text-transform: uppercase; text-align: right; }
  @media (max-width: 768px) { .tl-row .tl-out { text-align: left; color: var(--c-ink-500); } }

  .values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.15); border-left: 1px solid rgba(255,255,255,0.15); }
  @media (max-width: 768px) { .values-grid { grid-template-columns: 1fr; } }
  .value-cell { padding: var(--sp-10); border-right: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); }
  .value-cell .v-num { font-family: var(--font-mono); font-size: 11px; color: var(--c-orange-500); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-5); }
  .value-cell h3 { font-size: 1.5rem; letter-spacing: var(--tr-snug); line-height: 1.1; margin-bottom: var(--sp-4); color: var(--c-bone-50); max-width: 22ch; }
  .value-cell p { color: var(--c-blue-300); font-size: var(--fs-sm); line-height: 1.65; max-width: 50ch; }

  .certifs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: var(--bd-hairline); border-left: var(--bd-hairline); }
  @media (max-width: 768px) { .certifs-grid { grid-template-columns: 1fr 1fr; } }
  .certif-cell { aspect-ratio: 1/1; padding: var(--sp-6); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); background: var(--c-bone-50); display: flex; flex-direction: column; justify-content: space-between; }
  .certif-cell .c-num { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); }
  .certif-cell .c-icon { width: 56px; height: 56px; border: 1.5px solid var(--c-blue-700); color: var(--c-blue-700); display: inline-flex; align-items: center; justify-content: center; align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: var(--tr-tight); }
  .certif-cell .c-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--tr-snug); }
  .certif-cell .c-name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--c-ink-500); margin-top: 4px; line-height: 1.5; }

  .coords-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-12); align-items: start; }
  @media (max-width: 900px) { .coords-grid { grid-template-columns: 1fr; } }
  .coords-block { background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); padding: var(--sp-8); }
  .coords-block .field { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: var(--bd-hairline); align-items: baseline; }
  .coords-block .field:last-child { border-bottom: 0; }
  .coords-block .field .k { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
  .coords-block .field .v { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: var(--tr-snug); }
  .coords-block .field .v a { color: var(--c-blue-700); }
  .coords-block .field .v.tel { font-weight: 800; font-size: 1.5rem; color: var(--c-blue-700); font-variant-numeric: tabular-nums; }

  .map-card { background: var(--c-bone-100); border: var(--bd-hairline); aspect-ratio: 1/1; position: relative; padding: var(--sp-6); }
  .map-card svg { width: 100%; height: 100%; }
  .map-card .map-label { position: absolute; bottom: var(--sp-5); left: var(--sp-5); right: var(--sp-5); background: var(--c-bone-50); border: var(--bd-hairline); padding: var(--sp-3) var(--sp-4); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-700); letter-spacing: var(--tr-wide); line-height: 1.6; }
  .map-card .map-label strong { color: var(--c-ink-900); display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: var(--tr-snug); }

  .cta-final { background: var(--c-orange-600); padding: clamp(56px, 8vw, 96px) 0; color: #1a1000; }
  .cta-final .inner { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); align-items: center; }
  @media (max-width: 768px) { .cta-final .inner { grid-template-columns: 1fr; } }
  .cta-final h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: #1a1000; max-width: 18ch; }
  .cta-final p { color: rgba(26,16,0,0.7); margin-top: var(--sp-3); font-size: var(--fs-md); max-width: 50ch; }
  .cta-final .actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .cta-final .btn-secondary { color: #1a1000; border-color: #1a1000; background: transparent; }
  .cta-final .btn-secondary:hover { background: #1a1000; color: var(--c-orange-500); }
  .cta-final .btn-dark { background: var(--c-ink-900); color: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); }
  .cta-final .btn-dark:hover { background: transparent; color: var(--c-ink-900); }

  .footer { background: var(--c-ink-900); color: var(--c-bone-200); padding: var(--sp-12) 0 var(--sp-6); font-size: var(--fs-sm); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.1); }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
  @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-blue-300); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer ul a { color: var(--c-bone-200); text-decoration: none; }
  .footer ul a:hover { color: var(--c-orange-500); }
  .footer .brand-block .logo { color: var(--c-bone-50); margin-bottom: var(--sp-3); }
  .footer .brand-block p { color: var(--c-blue-300); line-height: 1.6; max-width: 28ch; margin: var(--sp-3) 0; font-size: 13px; }
  .footer .brand-block .tel { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--c-orange-500); text-decoration: none; font-variant-numeric: tabular-nums; }
  .footer-bottom { margin-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }

  .sticky-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--c-bone-50); border-top: 1.5px solid var(--c-ink-900); padding: 10px 12px; gap: 8px; }
  .sticky-mobile a { flex: 1; text-align: center; padding: 14px 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .sticky-mobile .call { background: var(--c-red-600); color: var(--c-bone-50); }
  .sticky-mobile .quote-btn { background: var(--c-orange-600); color: #1a1000; }
  @media (max-width: 768px) { .sticky-mobile { display: flex; } body { padding-bottom: 70px; } }


/* =========================================================================
   Page Tarifs.html
   ========================================================================= */
body { background: var(--c-bone-50); }

  .annonce { background: var(--c-ink-900); color: var(--c-bone-100); padding: 9px 20px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); position: sticky; top: 0; z-index: 60; letter-spacing: var(--tr-snug); }
  .annonce .dot { width:8px; height:8px; background: var(--c-red-600); border-radius:50%; animation: blink 1.6s infinite; }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .annonce .hide-sm { display:none; } }

  .header { position: sticky; top: 36px; z-index: 50; background: rgba(251,250,246,0.92); backdrop-filter: blur(8px); border-bottom: var(--bd-hairline); }
  .header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-4) 0; }
  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-900); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: var(--tr-tight); text-decoration: none; }
  .logo::before { content:""; width:22px; height:22px; background: var(--c-blue-700); display:inline-block; border-radius:2px; box-shadow: 4px 4px 0 var(--c-orange-600); }
  .logo small { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-left: 4px; }
  .nav { display: flex; gap: var(--sp-8); }
  .nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; }
  .nav a:hover, .nav a.active { color: var(--c-blue-700); }
  .header .tel-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); font-size: var(--fs-md); font-variant-numeric: tabular-nums; text-decoration: none; }
  .header .tel-cta svg { color: var(--c-blue-700); }
  @media (max-width: 1023px) { .nav { display: none; } }
  @media (max-width: 640px) { .header .tel-cta span.label { display:none; } }

  /* Hero — fiche tarifaire */
  .t-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px); background: var(--c-bone-50); }
  .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-12); }
  .breadcrumb a { color: var(--c-ink-500); text-decoration: none; }
  .breadcrumb .sep { color: var(--c-ink-300); }
  .breadcrumb .current { color: var(--c-ink-900); }

  .t-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); align-items: end; }
  @media (max-width: 1023px) { .t-hero-grid { grid-template-columns: 1fr; } }
  .t-hero h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: var(--sp-6); }
  .t-hero h1 em { font-style: italic; font-family: "Times New Roman", Georgia, serif; color: var(--c-orange-600); font-weight: 500; }
  .t-hero .lead { font-size: var(--fs-lg); color: var(--c-ink-700); line-height: 1.5; max-width: 42ch; }

  /* Cartouche TVA */
  .price-cartouche { background: var(--c-ink-900); color: var(--c-bone-50); padding: var(--sp-6); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); line-height: 1.7; }
  .price-cartouche .row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.2); }
  .price-cartouche .row:last-child { border-bottom: 0; }
  .price-cartouche .row strong { color: var(--c-orange-500); font-family: var(--font-display); font-weight: 700; }
  .price-cartouche .pc-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--c-bone-50); letter-spacing: var(--tr-snug); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; }

  /* Onglets catégories */
  .pricing-tabs { position: sticky; top: 100px; z-index: 40; background: var(--c-bone-50); border-block: var(--bd-hairline); padding: var(--sp-4) 0; }
  .pricing-tabs .container { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .pricing-tabs .container::-webkit-scrollbar { display: none; }
  .pricing-tabs a { padding: var(--sp-3) var(--sp-5); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-500); text-decoration: none; letter-spacing: var(--tr-snug); white-space: nowrap; border-right: var(--bd-hairline); display: flex; align-items: center; gap: var(--sp-2); }
  .pricing-tabs a:first-child { border-left: var(--bd-hairline); }
  .pricing-tabs a .ix { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-300); letter-spacing: var(--tr-wide); }
  .pricing-tabs a:hover, .pricing-tabs a.active { color: var(--c-blue-700); background: var(--c-bone-100); }
  .pricing-tabs a:hover .ix, .pricing-tabs a.active .ix { color: var(--c-orange-600); }

  /* Sections tarifaires */
  .section { padding: clamp(64px, 8vw, 96px) 0; }
  .section-alt { background: var(--c-bone-100); border-block: var(--bd-hairline); }
  .section-dark { background: var(--c-ink-900); color: var(--c-bone-100); }
  .section-dark h2 { color: var(--c-bone-50); }

  .section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); margin-bottom: var(--sp-10); align-items: end; padding-bottom: var(--sp-6); border-bottom: var(--bd-hairline); }
  @media (max-width: 768px) { .section-head { grid-template-columns: 1fr; } }
  .section-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
  .section-head .meta { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); line-height: 1.8; }
  @media (max-width: 768px) { .section-head .meta { text-align: left; } }
  .section-head .meta strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }

  /* ====== Tableau tarifaire — invoice style ====== */
  .price-table { width: 100%; border-collapse: collapse; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); font-family: var(--font-display); }
  .price-table thead th { background: var(--c-ink-900); color: var(--c-bone-50); padding: var(--sp-4) var(--sp-5); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-wide); text-transform: uppercase; text-align: left; }
  .price-table thead th:last-child { text-align: right; }
  .price-table thead th.col-ref { width: 90px; }
  .price-table thead th.col-price { width: 180px; }
  .price-table thead th.col-unit { width: 140px; }
  .price-table tbody tr { border-bottom: var(--bd-hairline); }
  .price-table tbody tr:hover { background: var(--c-bone-100); }
  .price-table tbody tr.featured { background: var(--c-orange-100); }
  .price-table tbody tr.featured:hover { background: #fde6b5; }
  .price-table td { padding: var(--sp-5); vertical-align: top; }
  .price-table td.ref { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); padding-top: 22px; }
  .price-table td.designation .name { font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--tr-snug); margin-bottom: 4px; }
  .price-table td.designation .desc { font-size: 13px; color: var(--c-ink-500); line-height: 1.6; max-width: 60ch; }
  .price-table td.designation .desc small { display: inline-block; margin-top: 6px; padding: 2px 8px; background: var(--c-blue-100); color: var(--c-blue-800); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); }
  .price-table td.unit { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-700); letter-spacing: var(--tr-wide); padding-top: 22px; }
  .price-table td.price { text-align: right; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--c-blue-700); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; padding-top: 18px; }
  .price-table td.price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--c-ink-500); margin-top: 2px; letter-spacing: 0; }
  .price-table tr.featured td.price { color: var(--c-orange-700); }

  @media (max-width: 768px) {
    .price-table thead { display: none; }
    .price-table tr { display: grid; grid-template-columns: 1fr auto; padding: var(--sp-5); gap: var(--sp-3); }
    .price-table td { padding: 0; }
    .price-table td.ref { grid-column: 1 / -1; padding-bottom: 4px; }
    .price-table td.designation { grid-column: 1; }
    .price-table td.unit { grid-column: 1; padding-top: 4px; }
    .price-table td.price { grid-column: 2; grid-row: 2; padding-top: 0; }
  }

  /* ====== Forfaits hero ====== */
  .forfaits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid var(--c-ink-900); border-left: var(--bd-hairline); }
  @media (max-width: 900px) { .forfaits { grid-template-columns: 1fr; } }
  .forfait-card { padding: var(--sp-8); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); background: var(--c-bone-50); display: flex; flex-direction: column; }
  .forfait-card.signature { background: var(--c-blue-700); color: var(--c-bone-50); }
  .forfait-card .f-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: var(--bd-hairline); display: flex; justify-content: space-between; }
  .forfait-card.signature .f-tag { color: var(--c-blue-300); border-bottom-color: rgba(255,255,255,0.2); }
  .forfait-card.signature .f-tag strong { color: var(--c-orange-500); font-family: var(--font-display); font-weight: 700; }
  .forfait-card h3 { font-size: 1.625rem; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--sp-3); max-width: 18ch; }
  .forfait-card.signature h3 { color: var(--c-bone-50); }
  .forfait-card .f-desc { color: var(--c-ink-500); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--sp-6); flex-grow: 1; }
  .forfait-card.signature .f-desc { color: var(--c-blue-300); }
  .forfait-card .f-price { font-family: var(--font-display); font-weight: 800; font-size: 3rem; color: var(--c-blue-700); letter-spacing: var(--tr-tight); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
  .forfait-card.signature .f-price { color: var(--c-orange-500); }
  .forfait-card .f-unit { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-6); }
  .forfait-card.signature .f-unit { color: var(--c-blue-300); }
  .forfait-card .f-includes { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-6); padding-block: var(--sp-4); border-block: var(--bd-hairline); }
  .forfait-card.signature .f-includes { border-block-color: rgba(255,255,255,0.2); }
  .forfait-card .f-includes li { font-size: 13px; color: var(--c-ink-700); display: flex; gap: 8px; align-items: baseline; line-height: 1.5; }
  .forfait-card.signature .f-includes li { color: var(--c-bone-100); }
  .forfait-card .f-includes li::before { content: "→"; color: var(--c-blue-700); font-weight: 700; flex-shrink: 0; }
  .forfait-card.signature .f-includes li::before { color: var(--c-orange-500); }

  /* Banner aide */
  .aide-banner { background: var(--c-green-100); border: 1.5px solid var(--c-green-600); padding: var(--sp-6) var(--sp-8); display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-6); align-items: center; margin-bottom: var(--sp-10); }
  @media (max-width: 768px) { .aide-banner { grid-template-columns: 1fr; } }
  .aide-banner .a-icon { width: 56px; height: 56px; background: var(--c-green-600); color: var(--c-bone-50); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: var(--tr-tight); }
  .aide-banner .a-text { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: var(--tr-snug); color: var(--c-ink-900); }
  .aide-banner .a-text small { display: block; font-weight: 400; font-size: 13px; color: var(--c-ink-700); margin-top: 4px; line-height: 1.5; }
  .aide-banner .a-amount { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--c-green-600); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); }
  .aide-banner .a-amount small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-top: 4px; }

  /* Comparateur urgence/horaires */
  .horaires-table { width: 100%; border-collapse: collapse; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); }
  .horaires-table th, .horaires-table td { padding: var(--sp-4) var(--sp-5); text-align: left; border-bottom: var(--bd-hairline); border-right: var(--bd-hairline); font-family: var(--font-display); font-size: var(--fs-sm); }
  .horaires-table th:last-child, .horaires-table td:last-child { border-right: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
  .horaires-table thead th { background: var(--c-ink-900); color: var(--c-bone-50); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-wide); text-transform: uppercase; }
  .horaires-table tbody tr:last-child td { border-bottom: 0; }
  .horaires-table .urg { color: var(--c-red-600); }
  .horaires-table .pct-up { color: var(--c-orange-700); font-family: var(--font-mono); font-size: 11px; }
  .horaires-table .pct-zero { color: var(--c-green-600); font-family: var(--font-mono); font-size: 11px; }

  /* FAQ tarifs */
  .faq-list { display: grid; grid-template-columns: 1fr; border-top: 1.5px solid var(--c-ink-900); }
  .faq-item { border-bottom: var(--bd-hairline); padding: var(--sp-6) 0; display: grid; grid-template-columns: 60px 1fr; gap: var(--sp-6); align-items: start; }
  @media (max-width: 768px) { .faq-item { grid-template-columns: 1fr; gap: var(--sp-3); } }
  .faq-item .num { font-family: var(--font-mono); font-size: 11px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); padding-top: 4px; }
  .faq-item .q { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--tr-snug); margin-bottom: var(--sp-3); }
  .faq-item .a { font-size: var(--fs-sm); color: var(--c-ink-700); line-height: 1.7; max-width: 70ch; }
  .faq-item .a strong { color: var(--c-ink-900); }

  /* CTA + Footer */
  .cta-final { background: var(--c-orange-600); padding: clamp(56px, 8vw, 96px) 0; color: #1a1000; }
  .cta-final .inner { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); align-items: center; }
  @media (max-width: 768px) { .cta-final .inner { grid-template-columns: 1fr; } }
  .cta-final h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: #1a1000; max-width: 18ch; }
  .cta-final p { color: rgba(26,16,0,0.7); margin-top: var(--sp-3); font-size: var(--fs-md); max-width: 50ch; }
  .cta-final .actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .cta-final .btn-secondary { color: #1a1000; border-color: #1a1000; background: transparent; }
  .cta-final .btn-secondary:hover { background: #1a1000; color: var(--c-orange-500); }
  .cta-final .btn-dark { background: var(--c-ink-900); color: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); }
  .cta-final .btn-dark:hover { background: transparent; color: var(--c-ink-900); }

  .footer { background: var(--c-ink-900); color: var(--c-bone-200); padding: var(--sp-12) 0 var(--sp-6); font-size: var(--fs-sm); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.1); }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
  @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-blue-300); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer ul a { color: var(--c-bone-200); text-decoration: none; }
  .footer ul a:hover { color: var(--c-orange-500); }
  .footer .brand-block .logo { color: var(--c-bone-50); margin-bottom: var(--sp-3); }
  .footer .brand-block p { color: var(--c-blue-300); line-height: 1.6; max-width: 28ch; margin: var(--sp-3) 0; font-size: 13px; }
  .footer .brand-block .tel { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--c-orange-500); text-decoration: none; font-variant-numeric: tabular-nums; }
  .footer-bottom { margin-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }

  .sticky-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--c-bone-50); border-top: 1.5px solid var(--c-ink-900); padding: 10px 12px; gap: 8px; }
  .sticky-mobile a { flex: 1; text-align: center; padding: 14px 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .sticky-mobile .call { background: var(--c-red-600); color: var(--c-bone-50); }
  .sticky-mobile .quote-btn { background: var(--c-orange-600); color: #1a1000; }
  .btn-orange { background: var(--c-orange-600); color: #1a1000; border: 1.5px solid var(--c-orange-600); }
  .btn-orange:hover { background: var(--c-orange-700); border-color: var(--c-orange-700); color: var(--c-bone-50); }
  @media (max-width: 768px) { .sticky-mobile { display: flex; } body { padding-bottom: 70px; } }


/* =========================================================================
   Page Contact.html
   ========================================================================= */
body { background: var(--c-bone-50); }

  .annonce { background: var(--c-ink-900); color: var(--c-bone-100); padding: 9px 20px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); position: sticky; top: 0; z-index: 60; letter-spacing: var(--tr-snug); }
  .annonce .dot { width:8px; height:8px; background: var(--c-red-600); border-radius:50%; animation: blink 1.6s infinite; }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .annonce .hide-sm { display:none; } }

  .header { position: sticky; top: 36px; z-index: 50; background: rgba(251,250,246,0.92); backdrop-filter: blur(8px); border-bottom: var(--bd-hairline); }
  .header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-4) 0; }
  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-900); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: var(--tr-tight); text-decoration: none; }
  .logo::before { content:""; width:22px; height:22px; background: var(--c-blue-700); display:inline-block; border-radius:2px; box-shadow: 4px 4px 0 var(--c-orange-600); }
  .logo small { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-left: 4px; }
  .nav { display: flex; gap: var(--sp-8); }
  .nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; }
  .nav a:hover, .nav a.active { color: var(--c-blue-700); }
  .header .tel-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); font-size: var(--fs-md); font-variant-numeric: tabular-nums; text-decoration: none; }
  .header .tel-cta svg { color: var(--c-blue-700); }
  @media (max-width: 1023px) { .nav { display: none; } }
  @media (max-width: 640px) { .header .tel-cta span.label { display:none; } }

  /* Hero contact */
  .c-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px); }
  .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-10); }
  .breadcrumb a { color: var(--c-ink-500); text-decoration: none; }
  .breadcrumb .sep { color: var(--c-ink-300); }
  .breadcrumb .current { color: var(--c-ink-900); }

  .c-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); align-items: end; padding-bottom: var(--sp-10); border-bottom: 2px solid var(--c-ink-900); }
  @media (max-width: 1023px) { .c-hero-grid { grid-template-columns: 1fr; } }
  .c-hero h1 { font-size: clamp(2.5rem, 6.5vw, 6rem); line-height: 0.92; letter-spacing: -0.045em; margin-bottom: var(--sp-5); }
  .c-hero h1 em { font-style: italic; font-family: "Times New Roman", Georgia, serif; color: var(--c-orange-600); font-weight: 500; }
  .c-hero .lead { font-size: var(--fs-lg); color: var(--c-ink-700); line-height: 1.5; max-width: 44ch; }

  .promesses { display: grid; grid-template-columns: 1fr; gap: 0; }
  .promesses .p-row { display: grid; grid-template-columns: 50px 1fr auto; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: var(--bd-hairline); align-items: center; }
  .promesses .p-row:first-child { border-top: var(--bd-hairline); }
  .promesses .p-num { font-family: var(--font-mono); font-size: 11px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); }
  .promesses .p-text { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: var(--tr-snug); }
  .promesses .p-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-blue-700); letter-spacing: var(--tr-wide); padding: 3px 8px; background: var(--c-blue-100); }

  /* Trois canaux de contact */
  .channels { padding: clamp(48px, 6vw, 72px) 0; border-bottom: var(--bd-hairline); }
  .channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--c-ink-900); }
  @media (max-width: 900px) { .channels-grid { grid-template-columns: 1fr; } }
  .channel { padding: var(--sp-8); border-right: var(--bd-hairline); display: flex; flex-direction: column; gap: var(--sp-4); background: var(--c-bone-50); transition: var(--tr-fast); position: relative; }
  .channel:last-child { border-right: 0; }
  @media (max-width: 900px) { .channel { border-right: 0; border-bottom: var(--bd-hairline); } .channel:last-child { border-bottom: 0; } }
  .channel.urgent { background: var(--c-red-600); color: var(--c-bone-50); }
  .channel.urgent::after { content: "URGENCE"; position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tr-wide); background: var(--c-bone-50); color: var(--c-red-600); padding: 3px 8px; }
  .channel:hover:not(.urgent) { background: var(--c-bone-100); }
  .ch-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); }
  .channel.urgent .ch-tag { color: rgba(255,255,255,0.7); }
  .ch-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.015em; }
  .channel.urgent .ch-title { color: var(--c-bone-50); }
  .ch-desc { font-size: 13px; color: var(--c-ink-700); line-height: 1.6; flex-grow: 1; }
  .channel.urgent .ch-desc { color: rgba(255,255,255,0.85); }
  .ch-value { font-family: var(--font-display); font-weight: 800; font-size: 1.875rem; color: var(--c-blue-700); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); padding-top: var(--sp-3); border-top: var(--bd-hairline); margin-top: auto; }
  .channel.urgent .ch-value { color: var(--c-bone-50); border-top-color: rgba(255,255,255,0.3); }
  .ch-meta { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); }
  .channel.urgent .ch-meta { color: rgba(255,255,255,0.7); }
  .ch-meta strong { color: var(--c-orange-600); font-family: var(--font-display); font-weight: 700; }
  .channel.urgent .ch-meta strong { color: var(--c-orange-500); }
  .ch-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--c-blue-700); text-decoration: none; letter-spacing: var(--tr-snug); }
  .channel.urgent .ch-link { color: var(--c-orange-500); }

  /* Form devis multi-étapes */
  .form-section { padding: clamp(56px, 8vw, 96px) 0; background: var(--c-bone-100); border-bottom: var(--bd-hairline); }
  .form-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--sp-12); }
  @media (max-width: 1023px) { .form-grid { grid-template-columns: 1fr; } }

  .form-side h2 { font-size: clamp(1.875rem, 3.5vw, 3rem); line-height: 0.95; letter-spacing: -0.035em; margin-bottom: var(--sp-5); }
  .form-side h2 em { font-style: italic; font-family: "Times New Roman", Georgia, serif; color: var(--c-blue-700); font-weight: 500; }
  .form-side .lead { font-size: var(--fs-md); color: var(--c-ink-700); line-height: 1.6; max-width: 44ch; margin-bottom: var(--sp-6); }

  .stats-list { display: grid; grid-template-columns: 1fr; }
  .stats-list .stat-row { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: var(--bd-hairline); align-items: baseline; }
  .stats-list .stat-row:first-child { border-top: var(--bd-hairline); }
  .stats-list .stat-num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--c-blue-700); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); }
  .stats-list .stat-label { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); color: var(--c-ink-700); line-height: 1.4; }

  /* Formulaire — papier carbone */
  .form-card { background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); padding: 0; position: relative; }
  .form-card .form-header { background: var(--c-ink-900); color: var(--c-bone-50); padding: var(--sp-5) var(--sp-6); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); text-transform: uppercase; }
  .form-card .form-header strong { color: var(--c-orange-500); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: var(--tr-snug); }

  /* Stepper */
  .stepper { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1.5px solid var(--c-ink-900); }
  .step { padding: var(--sp-4); text-align: center; border-right: var(--bd-hairline); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); position: relative; cursor: pointer; transition: var(--tr-fast); }
  .step:last-child { border-right: 0; }
  .step .step-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--c-ink-300); letter-spacing: var(--tr-tight); margin-bottom: 4px; }
  .step.active { background: var(--c-orange-500); color: #1a1000; }
  .step.active .step-num { color: #1a1000; }
  .step.done { background: var(--c-bone-100); }
  .step.done .step-num { color: var(--c-blue-700); }
  .step.done::before { content: "✓"; display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--c-green-600); margin-bottom: 4px; }
  .step.done .step-num { display: none; }

  .form-body { padding: var(--sp-7); }
  .form-step { display: none; }
  .form-step.active { display: block; }
  .form-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.015em; margin-bottom: var(--sp-2); }
  .form-step .step-desc { font-size: 13px; color: var(--c-ink-500); margin-bottom: var(--sp-6); line-height: 1.6; }

  /* Form fields */
  .field { display: block; margin-bottom: var(--sp-4); }
  .field label { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-700); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 6px; }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select { width: 100%; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-300); padding: 12px 14px; font-family: var(--font-display); font-size: var(--fs-md); color: var(--c-ink-900); outline: 0; transition: border-color 0.15s; border-radius: 0; }
  .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-blue-700); }
  .field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  @media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

  /* Radio carte (type d'intervention) */
  .radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--c-ink-300); }
  @media (max-width: 540px) { .radio-grid { grid-template-columns: 1fr; } }
  .radio-card { padding: var(--sp-4); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); cursor: pointer; transition: var(--tr-fast); display: block; position: relative; }
  .radio-card:nth-child(2n) { border-right: 0; }
  .radio-card:nth-last-child(-n+2) { border-bottom: 0; }
  @media (max-width: 540px) { .radio-card { border-right: 0; border-bottom: var(--bd-hairline); } .radio-card:last-child { border-bottom: 0; } }
  .radio-card input { position: absolute; opacity: 0; pointer-events: none; }
  .radio-card .rc-icon { width: 32px; height: 32px; background: var(--c-bone-100); border: var(--bd-hairline); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--c-ink-700); margin-bottom: var(--sp-3); }
  .radio-card .rc-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--tr-snug); margin-bottom: 2px; }
  .radio-card .rc-desc { font-size: 11px; color: var(--c-ink-500); line-height: 1.5; }
  .radio-card:hover { background: var(--c-bone-100); }
  .radio-card.selected { background: var(--c-orange-100); }
  .radio-card.selected .rc-icon { background: var(--c-orange-600); color: #1a1000; border-color: var(--c-orange-600); }
  .radio-card.selected::after { content: "✓"; position: absolute; top: 8px; right: 12px; font-family: var(--font-display); font-weight: 800; color: var(--c-orange-700); font-size: 16px; }

  /* Urgence radio */
  .urgency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  @media (max-width: 540px) { .urgency-grid { grid-template-columns: 1fr; } }
  .urg-pill { padding: var(--sp-4); border: 1.5px solid var(--c-ink-300); cursor: pointer; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: var(--tr-snug); transition: var(--tr-fast); position: relative; background: var(--c-bone-50); }
  .urg-pill input { position: absolute; opacity: 0; pointer-events: none; }
  .urg-pill .up-sub { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); font-weight: 400; margin-top: 4px; }
  .urg-pill:hover { background: var(--c-bone-100); }
  .urg-pill.selected { background: var(--c-ink-900); color: var(--c-bone-50); border-color: var(--c-ink-900); }
  .urg-pill.selected .up-sub { color: var(--c-orange-500); }
  .urg-pill.urgent.selected { background: var(--c-red-600); border-color: var(--c-red-600); }

  /* Form footer / actions */
  .form-actions { display: flex; gap: var(--sp-3); padding-top: var(--sp-6); margin-top: var(--sp-5); border-top: var(--bd-hairline); justify-content: space-between; }
  .form-actions .btn-back { background: transparent; border: 1.5px solid var(--c-ink-300); color: var(--c-ink-700); padding: 12px 24px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; }
  .form-actions .btn-back:hover { border-color: var(--c-ink-900); color: var(--c-ink-900); }
  .form-actions .btn-next { background: var(--c-blue-700); color: var(--c-bone-50); border: 1.5px solid var(--c-blue-700); padding: 12px 28px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; letter-spacing: var(--tr-snug); }
  .form-actions .btn-next:hover { background: var(--c-blue-800); }
  .form-actions .btn-submit { background: var(--c-orange-600); color: #1a1000; border: 1.5px solid var(--c-orange-600); padding: 12px 28px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); cursor: pointer; letter-spacing: var(--tr-snug); }
  .form-actions .btn-submit:hover { background: var(--c-orange-500); }

  /* Récap step 4 */
  .recap-list { background: var(--c-bone-100); border: var(--bd-hairline); padding: var(--sp-5); margin-bottom: var(--sp-5); }
  .recap-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--c-ink-300); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); }
  .recap-row:last-child { border-bottom: 0; }
  .recap-row .rec-key { color: var(--c-ink-500); text-transform: uppercase; }
  .recap-row .rec-val { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: var(--tr-snug); text-align: right; }

  /* Confirmation success */
  .form-success { display: none; padding: var(--sp-10); text-align: center; }
  .form-success.active { display: block; }
  .form-success .check { width: 80px; height: 80px; background: var(--c-green-600); color: var(--c-bone-50); display: inline-flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: var(--sp-5); border-radius: 50%; }
  .form-success h3 { font-size: 1.875rem; line-height: 1; letter-spacing: -0.025em; margin-bottom: var(--sp-3); }
  .form-success p { font-size: var(--fs-md); color: var(--c-ink-700); line-height: 1.6; max-width: 40ch; margin: 0 auto var(--sp-6); }
  .form-success .ref-code { font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); padding: var(--sp-3) var(--sp-4); background: var(--c-bone-100); border: var(--bd-hairline); display: inline-block; }

  /* Plan / coordonnées */
  .map-section { padding: clamp(56px, 8vw, 96px) 0; }
  .map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--c-ink-900); }
  @media (max-width: 1023px) { .map-grid { grid-template-columns: 1fr; } }
  .map-info { padding: var(--sp-8); border-right: var(--bd-hairline); }
  @media (max-width: 1023px) { .map-info { border-right: 0; border-bottom: var(--bd-hairline); } }
  .map-info h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: var(--sp-5); }
  .info-list { display: grid; grid-template-columns: 1fr; }
  .info-row { display: grid; grid-template-columns: 100px 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: var(--bd-hairline); align-items: baseline; }
  .info-row:first-child { border-top: var(--bd-hairline); }
  .info-row .ir-label { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; padding-top: 2px; }
  .info-row .ir-value { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: var(--tr-snug); line-height: 1.5; }
  .info-row .ir-value a { color: var(--c-ink-900); text-decoration: none; border-bottom: 2px solid var(--c-orange-500); }
  .info-row .ir-value small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--c-ink-500); font-size: 12px; margin-top: 2px; letter-spacing: 0; }

  /* Map visuel */
  .map-visual { background: var(--c-bone-100); position: relative; min-height: 480px; overflow: hidden; }
  .map-visual .grid-bg { position: absolute; inset: 0; background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0,0,0,0.06) 39px, rgba(0,0,0,0.06) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(0,0,0,0.06) 39px, rgba(0,0,0,0.06) 40px); }
  .map-visual .ile-shape { position: absolute; inset: 60px; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); clip-path: polygon(20% 30%, 35% 15%, 60% 12%, 78% 25%, 88% 45%, 82% 70%, 60% 85%, 35% 82%, 18% 65%, 12% 45%); }
  .map-visual .ile-pattern { position: absolute; inset: 60px; clip-path: polygon(20% 30%, 35% 15%, 60% 12%, 78% 25%, 88% 45%, 82% 70%, 60% 85%, 35% 82%, 18% 65%, 12% 45%); background-image: repeating-linear-gradient(45deg, transparent 0, transparent 8px, rgba(33,86,160,0.07) 8px, rgba(33,86,160,0.07) 9px); }
  .map-visual .pin { position: absolute; width: 16px; height: 16px; background: var(--c-orange-600); border: 2px solid var(--c-bone-50); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--c-ink-900); }
  .map-visual .pin.hq { width: 22px; height: 22px; background: var(--c-red-600); animation: pulse 2s infinite; }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 1.5px var(--c-ink-900), 0 0 0 0 rgba(213,63,70,0.4); } 50% { box-shadow: 0 0 0 1.5px var(--c-ink-900), 0 0 0 14px rgba(213,63,70,0); } }
  .map-visual .pin-label { position: absolute; background: var(--c-ink-900); color: var(--c-bone-50); padding: 4px 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); white-space: nowrap; }
  .map-visual .compass { position: absolute; top: 16px; right: 16px; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); padding: 10px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); text-align: center; }
  .map-visual .compass .n { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--c-orange-600); }
  .map-visual .legend { position: absolute; bottom: 16px; left: 16px; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); padding: 10px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); display: flex; gap: var(--sp-4); }
  .map-visual .legend .lg-item { display: flex; align-items: center; gap: 6px; }
  .map-visual .legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; }
  .map-visual .legend .lg-dot.hq { background: var(--c-red-600); }
  .map-visual .legend .lg-dot.zone { background: var(--c-orange-600); }

  /* CTA téléphone strip */
  .phone-cta { background: var(--c-orange-600); padding: clamp(40px, 6vw, 64px) 0; color: #1a1000; }
  .phone-cta .pc-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); align-items: center; }
  @media (max-width: 768px) { .phone-cta .pc-grid { grid-template-columns: 1fr; } }
  .phone-cta h2 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.03em; max-width: 22ch; }
  .phone-cta h2 em { font-style: italic; font-family: "Times New Roman", Georgia, serif; font-weight: 500; }
  .phone-cta .pc-tel { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 5vw, 4rem); color: #1a1000; text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); display: flex; align-items: center; gap: var(--sp-4); }
  .phone-cta .pc-tel svg { color: var(--c-ink-900); }
  .phone-cta p { color: rgba(26,16,0,0.7); margin-top: var(--sp-3); font-size: var(--fs-md); }

  /* Footer */
  .footer { background: var(--c-ink-900); color: var(--c-bone-200); padding: var(--sp-12) 0 var(--sp-6); font-size: var(--fs-sm); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.1); }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
  @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-blue-300); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer ul a { color: var(--c-bone-200); text-decoration: none; }
  .footer ul a:hover { color: var(--c-orange-500); }
  .footer .brand-block .logo { color: var(--c-bone-50); margin-bottom: var(--sp-3); }
  .footer .brand-block p { color: var(--c-blue-300); line-height: 1.6; max-width: 28ch; margin: var(--sp-3) 0; font-size: 13px; }
  .footer .brand-block .tel { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--c-orange-500); text-decoration: none; font-variant-numeric: tabular-nums; }
  .footer-bottom { margin-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }

  .sticky-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--c-bone-50); border-top: 1.5px solid var(--c-ink-900); padding: 10px 12px; gap: 8px; }
  .sticky-mobile a { flex: 1; text-align: center; padding: 14px 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .sticky-mobile .call { background: var(--c-red-600); color: var(--c-bone-50); }
  .sticky-mobile .quote-btn { background: var(--c-orange-600); color: #1a1000; }
  @media (max-width: 768px) { .sticky-mobile { display: flex; } body { padding-bottom: 70px; } }


/* =========================================================================
   Page Blog.html
   ========================================================================= */
body { background: var(--c-bone-50); }

  .annonce { background: var(--c-ink-900); color: var(--c-bone-100); padding: 9px 20px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); position: sticky; top: 0; z-index: 60; letter-spacing: var(--tr-snug); }
  .annonce .dot { width:8px; height:8px; background: var(--c-red-600); border-radius:50%; animation: blink 1.6s infinite; }
  @keyframes blink { 50% { opacity: 0.3; } }
  .annonce a { color: var(--c-orange-500); font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) { .annonce .hide-sm { display:none; } }

  .header { position: sticky; top: 36px; z-index: 50; background: rgba(251,250,246,0.92); backdrop-filter: blur(8px); border-bottom: var(--bd-hairline); }
  .header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-4) 0; }
  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-ink-900); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: var(--tr-tight); text-decoration: none; }
  .logo::before { content:""; width:22px; height:22px; background: var(--c-blue-700); display:inline-block; border-radius:2px; box-shadow: 4px 4px 0 var(--c-orange-600); }
  .logo small { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-left: 4px; }
  .nav { display: flex; gap: var(--sp-8); }
  .nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; }
  .nav a:hover, .nav a.active { color: var(--c-blue-700); }
  .header .tel-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); font-size: var(--fs-md); font-variant-numeric: tabular-nums; text-decoration: none; }
  .header .tel-cta svg { color: var(--c-blue-700); }
  @media (max-width: 1023px) { .nav { display: none; } }
  @media (max-width: 640px) { .header .tel-cta span.label { display:none; } }

  /* Masthead journal */
  .masthead { padding: clamp(40px, 6vw, 72px) 0 var(--sp-8); border-bottom: 2px solid var(--c-ink-900); }
  .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-8); }
  .breadcrumb a { color: var(--c-ink-500); text-decoration: none; }
  .breadcrumb .sep { color: var(--c-ink-300); }
  .breadcrumb .current { color: var(--c-ink-900); }

  .masthead-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-8); flex-wrap: wrap; }
  .masthead h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.9; letter-spacing: -0.045em; }
  .masthead h1 em { font-family: "Times New Roman", Georgia, serif; font-style: italic; font-weight: 500; color: var(--c-blue-700); }
  .masthead .ed-info { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-700); letter-spacing: var(--tr-wide); text-align: right; line-height: 1.8; text-transform: uppercase; }
  @media (max-width: 768px) { .masthead .ed-info { text-align: left; } }
  .masthead .ed-info strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; }

  .masthead-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: var(--bd-hairline); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
  @media (max-width: 768px) { .masthead-bar { grid-template-columns: 1fr 1fr; gap: var(--sp-2); } }
  .masthead-bar > div { padding: 0 var(--sp-4); border-right: var(--bd-hairline); }
  .masthead-bar > div:first-child { padding-left: 0; }
  .masthead-bar > div:last-child { border-right: 0; padding-right: 0; }
  .masthead-bar strong { display: block; color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: var(--tr-snug); margin-bottom: 4px; text-transform: none; }

  /* Catégories */
  .cat-tabs { padding: var(--sp-4) 0; border-bottom: var(--bd-hairline); position: sticky; top: 100px; z-index: 40; background: var(--c-bone-50); }
  .cat-tabs .container { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; align-items: center; }
  .cat-tabs .container::-webkit-scrollbar { display: none; }
  .cat-tabs .ct-label { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); padding-right: var(--sp-5); border-right: var(--bd-hairline); margin-right: var(--sp-5); white-space: nowrap; }
  .cat-tabs a { padding: 8px 16px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-500); text-decoration: none; letter-spacing: var(--tr-snug); white-space: nowrap; }
  .cat-tabs a:hover, .cat-tabs a.active { color: var(--c-blue-700); }
  .cat-tabs a.active::before { content: "—"; margin-right: 4px; color: var(--c-orange-600); }

  /* Featured article */
  .featured { padding: clamp(40px, 6vw, 72px) 0; border-bottom: var(--bd-hairline); }
  .feat-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: var(--sp-5); }
  .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
  @media (max-width: 1023px) { .feat-grid { grid-template-columns: 1fr; } }
  .feat-meta { display: flex; gap: var(--sp-3); align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-5); }
  .feat-meta .cat { color: var(--c-blue-700); padding: 2px 8px; background: var(--c-blue-100); }
  .feat h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); line-height: 1; letter-spacing: -0.035em; margin-bottom: var(--sp-5); }
  .feat h2 a { color: var(--c-ink-900); text-decoration: none; background-image: linear-gradient(transparent 92%, var(--c-orange-500) 92%); background-size: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s ease; }
  .feat h2 a:hover { background-size: 100% 100%; }
  .feat .lead { font-size: var(--fs-md); color: var(--c-ink-700); line-height: 1.6; max-width: 50ch; margin-bottom: var(--sp-6); }
  .feat .author-line { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); padding-top: var(--sp-4); border-top: var(--bd-hairline); }
  .feat .author-line strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; }

  .feat-image { aspect-ratio: 4/3; background: var(--c-blue-700); position: relative; overflow: hidden; }
  .feat-image .tile-pattern { position: absolute; inset: 0; background-image:
    linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.08) 55%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0, transparent 40px, rgba(255,255,255,0.06) 40px, rgba(255,255,255,0.06) 41px),
    repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(255,255,255,0.06) 40px, rgba(255,255,255,0.06) 41px);
    background-size: 200px 200px, 100% 100%, 100% 100%; }
  .feat-image .tag-print { position: absolute; top: var(--sp-5); left: var(--sp-5); background: var(--c-bone-50); color: var(--c-ink-900); padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); }
  .feat-image .tag-print strong { color: var(--c-blue-700); font-family: var(--font-display); font-weight: 700; }
  .feat-image .caption { position: absolute; bottom: var(--sp-5); left: var(--sp-5); right: var(--sp-5); background: rgba(12,24,37,0.85); color: var(--c-bone-50); padding: var(--sp-4) var(--sp-5); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); line-height: 1.6; backdrop-filter: blur(4px); }
  .feat-image .caption strong { display: block; color: var(--c-orange-500); font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-bottom: 4px; letter-spacing: var(--tr-snug); }

  /* Section grille */
  .section { padding: clamp(56px, 8vw, 88px) 0; }
  .section-alt { background: var(--c-bone-100); border-block: var(--bd-hairline); }

  .section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); margin-bottom: var(--sp-10); align-items: end; padding-bottom: var(--sp-5); border-bottom: var(--bd-hairline); }
  @media (max-width: 768px) { .section-head { grid-template-columns: 1fr; } }
  .section-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
  .section-head .meta { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); line-height: 1.8; }
  @media (max-width: 768px) { .section-head .meta { text-align: left; } }
  .section-head .meta strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }

  /* Grille articles */
  .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid var(--c-ink-900); border-left: var(--bd-hairline); }
  @media (max-width: 900px) { .articles-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .articles-grid { grid-template-columns: 1fr; } }
  .article-card { padding: var(--sp-6); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); background: var(--c-bone-50); display: flex; flex-direction: column; gap: var(--sp-4); transition: var(--tr-fast); }
  .article-card:hover { background: var(--c-bone-100); }
  .article-card .art-vignette { aspect-ratio: 4/3; background: var(--c-bone-200); position: relative; overflow: hidden; }
  .article-card .art-vignette.v-blue { background: var(--c-blue-700); }
  .article-card .art-vignette.v-orange { background: var(--c-orange-600); }
  .article-card .art-vignette.v-dark { background: var(--c-ink-900); }
  .article-card .art-vignette.v-bone { background: var(--c-bone-200); }
  .article-card .art-vignette.v-mist { background: var(--c-blue-100); }
  .article-card .art-vignette.v-green { background: var(--c-green-100); border: var(--bd-hairline); }
  .article-card .art-vignette .v-pattern { position: absolute; inset: 0; opacity: 0.18; background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 10px, currentColor 10px, currentColor 11px); }
  .article-card .art-vignette.v-blue .v-pattern { color: var(--c-bone-50); }
  .article-card .art-vignette.v-orange .v-pattern { color: #1a1000; }
  .article-card .art-vignette.v-dark .v-pattern { color: var(--c-orange-500); }
  .article-card .art-vignette.v-bone .v-pattern { color: var(--c-blue-700); }
  .article-card .art-vignette.v-mist .v-pattern { color: var(--c-blue-700); }
  .article-card .art-vignette.v-green .v-pattern { color: var(--c-green-600); }
  .article-card .art-vignette .v-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tr-tight); }
  .article-card .art-vignette.v-blue .v-glyph { color: var(--c-bone-50); }
  .article-card .art-vignette.v-orange .v-glyph { color: #1a1000; }
  .article-card .art-vignette.v-dark .v-glyph { color: var(--c-orange-500); }
  .article-card .art-vignette.v-bone .v-glyph { color: var(--c-blue-700); }
  .article-card .art-vignette.v-mist .v-glyph { color: var(--c-blue-700); }
  .article-card .art-vignette.v-green .v-glyph { color: var(--c-green-600); }
  .article-card .art-vignette .v-tag { position: absolute; top: 8px; left: 8px; background: var(--c-bone-50); padding: 3px 8px; font-family: var(--font-mono); font-size: 9px; color: var(--c-ink-700); letter-spacing: var(--tr-wide); }

  .article-card .art-meta { display: flex; gap: var(--sp-3); align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
  .article-card .art-meta .cat { color: var(--c-blue-700); font-weight: 500; }
  .article-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: var(--tr-snug); }
  .article-card h3 a { color: var(--c-ink-900); text-decoration: none; }
  .article-card h3 a:hover { color: var(--c-blue-700); }
  .article-card .art-desc { font-size: 13px; color: var(--c-ink-500); line-height: 1.6; flex-grow: 1; }
  .article-card .art-foot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-3); border-top: var(--bd-hairline); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); }
  .article-card .art-foot .author { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 600; }

  /* Newsletter */
  .newsletter-strip { background: var(--c-ink-900); color: var(--c-bone-50); padding: clamp(40px, 6vw, 64px) 0; }
  .newsletter-strip .ns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center; }
  @media (max-width: 768px) { .newsletter-strip .ns-grid { grid-template-columns: 1fr; } }
  .newsletter-strip h3 { color: var(--c-bone-50); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 22ch; margin-bottom: var(--sp-3); }
  .newsletter-strip h3 em { font-family: "Times New Roman", Georgia, serif; font-style: italic; font-weight: 500; color: var(--c-orange-500); }
  .newsletter-strip p { color: var(--c-blue-300); font-size: var(--fs-sm); max-width: 50ch; line-height: 1.6; }
  .ns-form { display: flex; gap: 0; border: 1.5px solid var(--c-bone-50); background: rgba(255,255,255,0.04); }
  .ns-form input { flex: 1; background: transparent; border: 0; padding: var(--sp-4) var(--sp-5); font-family: var(--font-display); font-size: var(--fs-sm); color: var(--c-bone-50); outline: 0; }
  .ns-form input::placeholder { color: rgba(255,255,255,0.4); }
  .ns-form button { background: var(--c-orange-600); color: #1a1000; border: 0; padding: 0 var(--sp-6); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--tr-snug); cursor: pointer; }
  .ns-form button:hover { background: var(--c-orange-500); }
  .ns-foot { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: var(--tr-wide); margin-top: var(--sp-3); }

  /* CTA + Footer */
  .footer { background: var(--c-ink-900); color: var(--c-bone-200); padding: var(--sp-12) 0 var(--sp-6); font-size: var(--fs-sm); border-top: 1px solid rgba(255,255,255,0.1); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.1); }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
  @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-blue-300); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer ul a { color: var(--c-bone-200); text-decoration: none; }
  .footer ul a:hover { color: var(--c-orange-500); }
  .footer .brand-block .logo { color: var(--c-bone-50); margin-bottom: var(--sp-3); }
  .footer .brand-block p { color: var(--c-blue-300); line-height: 1.6; max-width: 28ch; margin: var(--sp-3) 0; font-size: 13px; }
  .footer .brand-block .tel { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--c-orange-500); text-decoration: none; font-variant-numeric: tabular-nums; }
  .footer-bottom { margin-top: var(--sp-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }

  .sticky-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--c-bone-50); border-top: 1.5px solid var(--c-ink-900); padding: 10px 12px; gap: 8px; }
  .sticky-mobile a { flex: 1; text-align: center; padding: 14px 12px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .sticky-mobile .call { background: var(--c-red-600); color: var(--c-bone-50); }
  .sticky-mobile .quote-btn { background: var(--c-orange-600); color: #1a1000; }
  @media (max-width: 768px) { .sticky-mobile { display: flex; } body { padding-bottom: 70px; } }
/* ============================================================ */
/* PMD Extras (mobile nav, fade-up, focus, overrides) */
/* ============================================================ */
/* ============================================================
   PMD-GAZ — Extras non couverts par les maquettes
   - Mobile nav drawer
   - Fade-up scroll observer
   - Overrides ponctuels (icônes, focus, masquage hamburger desktop)
   ============================================================ */

/* Hamburger : visible <1024px, caché desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-ink-100);
  border-radius: var(--r-sm);
  padding: 8px;
  color: var(--c-ink-900);
  cursor: pointer;
  transition: var(--tr-fast);
}
.nav-toggle:hover {
  border-color: var(--c-ink-900);
  background: var(--c-bone-100);
}
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .header .row { gap: var(--sp-3); }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--c-bone-50);
  border-left: 1.5px solid var(--c-ink-900);
  z-index: 65;
  padding: calc(var(--sp-12) + 36px) var(--sp-6) var(--sp-8);
  box-shadow: var(--sh-lg);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-nav nav a {
  display: block;
  padding: var(--sp-4) var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: var(--tr-snug);
  color: var(--c-ink-900);
  text-decoration: none;
  border-bottom: var(--bd-hairline);
  transition: var(--tr-fast);
}
.mobile-nav nav a:hover {
  background: var(--c-bone-100);
  padding-inline: var(--sp-5);
  color: var(--c-blue-700);
}
.mobile-nav nav a.tel {
  margin-top: var(--sp-6);
  color: var(--c-bone-50);
  background: var(--c-blue-700);
  border: 0;
  border-radius: var(--r-md);
  text-align: center;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.mobile-nav nav a.tel:hover {
  background: var(--c-blue-900);
  padding-inline: var(--sp-3);
}

/* Fade-up scroll reveal */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* SVG icon defaults */
svg.i { fill: none; stroke: currentColor; display: inline-block; vertical-align: middle; }

/* Carte de service rendue cliquable comme <a> */
a.svc { color: inherit; text-decoration: none; }
a.svc:hover { color: inherit; }
a.dept-row { color: inherit; text-decoration: none; }

/* Override final-cta-actions sur mobile : empêcher overflow horizontal */
@media (max-width: 768px) {
  .final-cta-actions { min-width: 0; width: 100%; }
  .final-cta-actions .tel-big { font-size: 1.25rem; padding: var(--sp-4) var(--sp-3); }
}

/* ============================================================
   PMD Logo (image OU mark abstrait par défaut)
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.logo .pmd-logo-img { display: block; height: 36px; width: auto; flex-shrink: 0; }
.logo .pmd-logo-img--footer { height: 40px; filter: brightness(0) invert(1); /* version blanche sur fond sombre */ opacity: 0.95; }
.logo .pmd-logo-mark {
  width: 22px; height: 22px;
  background: var(--c-blue-700);
  display: inline-block;
  border-radius: 2px;
  box-shadow: 4px 4px 0 var(--c-orange-600);
  flex-shrink: 0;
}
.logo .logo-text { display: inline-flex; align-items: baseline; gap: 4px; }
@media (max-width: 540px) {
  .logo .logo-text small { display: none; }
  .logo .pmd-logo-img { height: 32px; }
}

/* Override : si .logo a une image, on retire le ::before (puisqu'on a vrai logo) */
.logo:has(.pmd-logo-img)::before { content: none; display: none; }

/* ============================================================
   Hero image réelle (remplace le placeholder rayé)
   ============================================================ */
.hero-photo.has-image {
  background: var(--c-bone-100);
  border: 1px solid var(--c-blue-100);
  padding: 0;
  overflow: hidden;
}
.hero-photo.has-image .hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.hero-photo-caption {
  position: absolute;
  bottom: var(--sp-4); left: var(--sp-4);
  background: var(--c-bone-50);
  border: var(--bd-hairline);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-wide);
  color: var(--c-ink-700);
  text-transform: uppercase;
  z-index: 2;
  max-width: 75%;
}

/* ============================================================
   Hero image — override FORT (spécificité body[data-hero] .hero-photo)
   ============================================================ */
body[data-hero] .hero-photo.has-image,
body[data-hero="1"] .hero-photo.has-image,
body[data-hero="2"] .hero-photo.has-image,
body[data-hero="3"] .hero-photo.has-image {
  background: var(--c-bone-100) !important;
  border: 1px solid var(--c-blue-100);
  padding: 0;
  overflow: hidden;
  display: block;
}
body[data-hero] .hero-photo.has-image .hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  z-index: 2;
}
body[data-hero] .hero-photo.has-image .hero-photo-caption {
  z-index: 3;
}

/* ============================================================
   Hero image — APPROCHE background-image (robuste, contourne cascade)
   Le style inline `background-image: url(...)` est posé sur le .hero-photo
   directement. Mes overrides assurent background-size/position/repeat.
   ============================================================ */
body .hero-photo.has-image,
body[data-hero] .hero-photo.has-image,
body[data-hero="1"] .hero-photo.has-image,
body[data-hero="2"] .hero-photo.has-image,
body[data-hero="3"] .hero-photo.has-image {
  background-color: var(--c-bone-100) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center 35% !important;
  border: 1px solid var(--c-blue-100);
  padding: 0;
  overflow: hidden;
  display: block;
}
/* Empêcher le motif rayé hérité de .hero-photo de tracer en parallèle au background-image inline */
body[data-hero] .hero-photo.has-image::before,
body .hero-photo.has-image::before { content: none !important; }

/* ============================================================
   FIX FINAL — Hero visual width + background via CSS custom prop
   1. .hero-visual : sans width explicite, l'aspect-ratio + max-width +
      margin-inline-start:auto le collapse à 0 dans la grille (réf bug).
   2. Le template inline `style="--pmd-hero-bg: url(...)"`. On lit la
      custom prop avec var() + !important pour battre le shorthand
      .hero-photo { background: <gradient> } de la maquette homepage.
   ============================================================ */
.hero-visual { width: 100%; }
body[data-hero] .hero-photo.has-image,
.hero-photo.has-image {
  background-image: var(--pmd-hero-bg, none) !important;
  background-size: cover !important;
  background-position: center 35% !important;
  background-repeat: no-repeat !important;
  background-color: var(--c-bone-100) !important;
}

/* ============================================================
   FIX — Price cards
   1. align-items:start pour que chaque card prenne sa hauteur naturelle
      (sinon le featured avait un espace vide bleu de 40px en bas).
   2. Override du padding hérité de .featured (maquette Page Blog qui
      a `.featured { padding: clamp(40px, 6vw, 72px) 0; }` et qui matche
      le `.price-card.featured` par cascade).
   ============================================================ */
.price-grid {
  align-items: start;
}
.price-card.featured {
  padding: var(--sp-8);
  border-bottom: 1.5px solid var(--c-blue-700);
}

/* ============================================================
   Page 404 (404.php) — layout minimaliste, hors navbar standard
   Extrait de maquettes-v2/Page 404.html.
   Selectors btn renommés en btn-404-primary/btn-404-tel pour éviter
   les collisions avec les boutons de la maquette principale.
   ============================================================ */

/* Layout */
html, body { height: 100%; }
body.error404 { background: var(--c-bone-50); display: flex; flex-direction: column; }

/* Minimal header pour 404 */
.err404-header { padding: var(--sp-5) 0; border-bottom: var(--bd-hairline); position: static; background: var(--c-bone-50); }
.err404-header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 0; }

/* Main 404 stage */
.err404-main { flex: 1; padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 80px); }

.err-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (max-width: 1023px) { .err-grid { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* Left: error info */
.err-tag { font-family: var(--font-mono); font-size: 11px; color: var(--c-red-600); letter-spacing: var(--tr-wide); text-transform: uppercase; display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.err-tag .pulse { width: 10px; height: 10px; background: var(--c-red-600); border-radius: 50%; position: relative; flex-shrink: 0; }
.err-tag .pulse::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--c-red-600); border-radius: 50%; opacity: 0.4; animation: pulse-ring-404 2s infinite; }
@keyframes pulse-ring-404 { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }
.err-tag strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; }

.err-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: var(--sp-5); color: var(--c-ink-900); }
.err-title em { font-family: "Source Serif 4", serif; font-style: italic; font-weight: 500; color: var(--c-blue-700); }
.err-title .strike { position: relative; display: inline-block; }
.err-title .strike::after { content: ""; position: absolute; top: 50%; left: -4px; right: -4px; height: 3px; background: var(--c-red-600); transform: rotate(-3deg); }

.err-sub { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.5; color: var(--c-ink-700); max-width: 46ch; margin-bottom: var(--sp-7); }
.err-sub strong { font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); font-style: normal; }

/* Diagnostic console */
.diag-card { background: var(--c-ink-900); color: var(--c-bone-50); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-7); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-wide); position: relative; padding-left: calc(var(--sp-6) + 14px); }
.diag-card::before { content: "▍"; position: absolute; top: var(--sp-5); left: 8px; color: var(--c-orange-500); animation: blink-404 1s infinite; }
@keyframes blink-404 { 50% { opacity: 0; } }
.diag-card .line { color: var(--c-blue-300); line-height: 1.9; }
.diag-card .line .lbl { color: var(--c-ink-500); display: inline-block; width: 100px; }
.diag-card .line .val { color: var(--c-bone-50); word-break: break-all; }
.diag-card .line.err .val { color: var(--c-red-500, #e35d62); }
.diag-card .line.ok .val { color: var(--c-green-500, #4ea76d); }

/* CTA row 404-specific */
.err404-main .cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.btn-404-primary,
.btn-404-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  text-decoration: none; letter-spacing: var(--tr-snug);
  transition: var(--tr-fast);
  border: 0;
  cursor: pointer;
}
.btn-404-primary { background: var(--c-ink-900); color: var(--c-bone-50); }
.btn-404-primary:hover { background: var(--c-blue-700); color: var(--c-bone-50); }
.btn-404-tel { background: var(--c-red-600); color: var(--c-bone-50); font-variant-numeric: tabular-nums; }
.btn-404-tel:hover { background: var(--c-red-700); color: var(--c-bone-50); }

/* Right: visual 404 */
.err-visual {
  position: relative;
  aspect-ratio: 5 / 6;
  background: var(--c-blue-700);
  border: 1.5px solid var(--c-ink-900);
  overflow: hidden;
}
@media (max-width: 1023px) { .err-visual { aspect-ratio: 4 / 3; width: 100%; max-width: 520px; margin: 0 auto; } }

.err-visual .numero {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(12rem, 28vw, 22rem); line-height: 0.85;
  color: var(--c-bone-50); letter-spacing: -0.08em;
  text-shadow: 6px 6px 0 var(--c-orange-600);
  user-select: none;
}
.err-visual .numero .zero { display: inline-block; position: relative; }

.err-visual .vapeur {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.err-visual .vapeur span {
  width: 14px; height: 14px; background: rgba(251, 250, 246, 0.55); border-radius: 50%;
  animation: rise-404 2.4s infinite ease-out;
}
.err-visual .vapeur span:nth-child(2) { width: 10px; height: 10px; animation-delay: 0.6s; }
.err-visual .vapeur span:nth-child(3) { width: 8px; height: 8px; animation-delay: 1.2s; }
@keyframes rise-404 {
  0% { transform: translateY(10px) scale(0.6); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: translateY(-80px) scale(1.3); opacity: 0; }
}

.err-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 50px, rgba(255,255,255,0.06) 50px, rgba(255,255,255,0.06) 51px),
    repeating-linear-gradient(90deg, transparent 0, transparent 50px, rgba(255,255,255,0.06) 50px, rgba(255,255,255,0.06) 51px);
  pointer-events: none;
}

.err-visual .stamp {
  position: absolute;
  background: var(--c-bone-50); color: var(--c-ink-900);
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  border: 1px solid var(--c-ink-900);
  z-index: 3;
}
.err-visual .stamp.tl { top: 16px; left: 16px; }
.err-visual .stamp.tr { top: 16px; right: 16px; background: var(--c-red-600); color: var(--c-bone-50); border-color: var(--c-red-700); font-weight: 700; }
.err-visual .stamp.tr .pulse-mini { display: inline-block; width: 6px; height: 6px; background: var(--c-bone-50); border-radius: 50%; margin-right: 4px; animation: blink-404 1.2s infinite; vertical-align: 1px; }
.err-visual .stamp.bl { bottom: 16px; left: 16px; }
.err-visual .stamp.br { bottom: 16px; right: 16px; background: var(--c-orange-500); color: #1a1000; border-color: var(--c-orange-600); }

.err-visual .dim {
  position: absolute;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(251, 250, 246, 0.6);
  letter-spacing: var(--tr-wide);
}
.err-visual .dim.left { top: 45%; left: 4px; writing-mode: vertical-rl; transform: rotate(180deg); }
.err-visual .dim.bot { bottom: 50px; left: 50%; transform: translateX(-50%); }

/* Section helpers */
.err404-main .helpers { margin-top: clamp(48px, 6vw, 80px); }
.err404-main .helpers-head { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: baseline; padding-bottom: var(--sp-4); border-bottom: 2px solid var(--c-ink-900); margin-bottom: var(--sp-6); }
.err404-main .helpers-head .num { font-family: var(--font-mono); font-size: 11px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); font-weight: 500; }
.err404-main .helpers-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; }

/* Search 404 */
.err404-main .search-bar { display: grid; grid-template-columns: 1fr auto; border: 1.5px solid var(--c-ink-900); background: var(--c-bone-50); margin-bottom: var(--sp-8); max-width: 760px; }
.err404-main .search-bar input { border: 0; padding: 18px 22px; font-family: var(--font-display); font-size: var(--fs-md); background: transparent; color: var(--c-ink-900); outline: none; }
.err404-main .search-bar input::placeholder { color: var(--c-ink-500); }
.err404-main .search-bar button { border: 0; background: var(--c-ink-900); color: var(--c-bone-50); padding: 0 28px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--tr-snug); cursor: pointer; transition: var(--tr-fast); display: inline-flex; align-items: center; gap: 6px; }
.err404-main .search-bar button:hover { background: var(--c-orange-600); color: #1a1000; }

/* Quick links grid */
.err404-main .links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--c-ink-900); background: var(--c-bone-50); }
@media (max-width: 900px) { .err404-main .links-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .err404-main .links-grid { grid-template-columns: 1fr; } }
.err404-main .link-card { padding: var(--sp-5) var(--sp-6); border-right: var(--bd-hairline); border-bottom: var(--bd-hairline); text-decoration: none; color: inherit; transition: var(--tr-fast); position: relative; display: block; }
.err404-main .link-card:hover { background: var(--c-bone-100); }
@media (min-width: 901px) {
  .err404-main .link-card:nth-child(3n) { border-right: 0; }
  .err404-main .link-card:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 900px) and (min-width: 541px) {
  .err404-main .link-card:nth-child(2n) { border-right: 0; }
  .err404-main .link-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .err404-main .link-card { border-right: 0; }
  .err404-main .link-card:last-child { border-bottom: 0; }
}
.err404-main .link-card .num { font-family: var(--font-mono); font-size: 10px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-3); display: block; }
.err404-main .link-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: var(--tr-snug); margin-bottom: 6px; color: var(--c-ink-900); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.err404-main .link-card h3 .arrow { font-weight: 400; color: var(--c-ink-500); transition: var(--tr-fast); }
.err404-main .link-card:hover h3 .arrow { color: var(--c-orange-600); transform: translateX(4px); }
.err404-main .link-card p { font-family: var(--font-body); font-size: 13px; color: var(--c-ink-500); line-height: 1.5; margin: 0; }

/* Bottom strip */
.err404-main .bottom-strip { margin-top: clamp(40px, 5vw, 64px); padding: var(--sp-6) var(--sp-7); background: var(--c-ink-900); color: var(--c-bone-200); display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center; }
@media (max-width: 768px) { .err404-main .bottom-strip { grid-template-columns: 1fr; text-align: left; } }
.err404-main .bottom-strip .bs-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-orange-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
.err404-main .bottom-strip .bs-text { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: var(--c-bone-50); max-width: 60ch; margin: 0; }
.err404-main .bottom-strip .bs-text strong { font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--c-orange-500); }
.err404-main .bottom-strip a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; color: var(--c-bone-50); font-size: var(--fs-sm); text-decoration: none; padding: 10px 16px; border: 1.5px solid var(--c-bone-50); letter-spacing: var(--tr-snug); }
.err404-main .bottom-strip a:hover { background: var(--c-bone-50); color: var(--c-ink-900); }

/* Minimal footer 404 */
.footer-min { padding: var(--sp-6) 0; border-top: var(--bd-hairline); background: var(--c-bone-50); }
.footer-min .row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
.footer-min .row a { color: var(--c-ink-700); text-decoration: none; }
.footer-min .row a:hover { color: var(--c-blue-700); }
.footer-min .links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* Body class WP 'error404' : on retire le sticky-cta même si déclenché */
body.error404 .sticky-mobile { display: none !important; }
body.error404 .annonce { display: none; }

/* ============================================================
   Page Mentions légales (template-legal.php)
   Extrait de maquettes-v2/Mentions Legales.html
   ============================================================ */

.legal-head { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); border-bottom: 2px solid var(--c-ink-900); background: var(--c-bone-100); }
.legal-head .meta-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: end; margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px dashed var(--c-ink-300); font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-700); letter-spacing: var(--tr-wide); text-transform: uppercase; }
.legal-head .meta-row .num { color: var(--c-orange-600); font-weight: 500; }
.legal-head .meta-row .doc-id { color: var(--c-ink-500); }
@media (max-width: 640px) { .legal-head .meta-row { grid-template-columns: 1fr; gap: var(--sp-2); } }

.legal-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: var(--sp-5); }
.legal-head h1 em { font-family: "Source Serif 4", serif; font-style: italic; font-weight: 500; color: var(--c-blue-700); }
.legal-head .sub { font-family: var(--font-display); font-size: 1.0625rem; color: var(--c-ink-700); max-width: 60ch; line-height: 1.6; }
.legal-head .sub strong { color: var(--c-ink-900); font-weight: 700; }

.legal-head .stamp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--sp-6); border: 1.5px solid var(--c-ink-900); background: var(--c-bone-50); }
@media (max-width: 768px) { .legal-head .stamp-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .legal-head .stamp-row { grid-template-columns: 1fr; } }
.legal-head .stamp { padding: var(--sp-4) var(--sp-5); border-right: var(--bd-hairline); }
.legal-head .stamp:last-child { border-right: 0; }
@media (max-width: 768px) { .legal-head .stamp:nth-child(2) { border-right: 0; } .legal-head .stamp:nth-child(-n+2) { border-bottom: var(--bd-hairline); } }
@media (max-width: 480px) { .legal-head .stamp { border-right: 0; border-bottom: var(--bd-hairline); } .legal-head .stamp:last-child { border-bottom: 0; } }
.legal-head .stamp .label { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 6px; }
.legal-head .stamp .value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--c-ink-900); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-snug); }

/* Body legal */
.legal-body { padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.legal-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-10); align-items: start; }
@media (max-width: 1023px) { .legal-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.legal-toc { position: sticky; top: 110px; align-self: start; padding: var(--sp-5); border: var(--bd-hairline); background: var(--c-bone-50); }
@media (max-width: 1023px) { .legal-toc { position: relative; top: 0; } }
.legal-toc h4 { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin: 0 0 var(--sp-3); padding-bottom: var(--sp-3); border-bottom: var(--bd-hairline); }
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: secCount; }
.legal-toc ol li { counter-increment: secCount; }
.legal-toc ol li a { display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-2); padding: 8px 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; letter-spacing: var(--tr-snug); line-height: 1.4; border-bottom: 1px dashed var(--c-ink-300); transition: var(--tr-fast); }
.legal-toc ol li:last-child a { border-bottom: 0; }
.legal-toc ol li a::before { content: "§" counter(secCount, decimal-leading-zero); font-family: var(--font-mono); font-size: 10px; color: var(--c-orange-600); padding-top: 2px; letter-spacing: var(--tr-wide); }
.legal-toc ol li a:hover { color: var(--c-blue-700); }
.legal-toc ol li a.active { color: var(--c-blue-700); font-weight: 700; }

.legal-content { max-width: 70ch; }
.legal-content section { margin-bottom: var(--sp-12); padding-top: var(--sp-6); border-top: 2px solid var(--c-ink-900); }
.legal-content section:first-child { border-top: 0; padding-top: 0; }
.legal-content section .sec-head { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: baseline; margin-bottom: var(--sp-5); }
.legal-content section .sec-num { font-family: var(--font-mono); font-size: 11px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); padding-top: 6px; font-weight: 500; }
.legal-content section h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--c-ink-900); margin: 0; }
.legal-content section h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: var(--tr-snug); margin: var(--sp-5) 0 var(--sp-3); color: var(--c-ink-900); }

.legal-content p { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--c-ink-700); margin-bottom: var(--sp-3); text-wrap: pretty; }
.legal-content p strong { color: var(--c-ink-900); font-weight: 600; }
.legal-content a { color: var(--c-blue-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-content a:hover { color: var(--c-orange-600); }

/* Identity table */
.identity-table { width: 100%; border-collapse: collapse; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); margin: var(--sp-4) 0 var(--sp-5); font-family: var(--font-display); }
.identity-table tr { border-bottom: var(--bd-hairline); }
.identity-table tr:last-child { border-bottom: 0; }
.identity-table th { text-align: left; vertical-align: top; padding: 12px 16px; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; font-weight: 500; width: 38%; background: var(--c-bone-100); border-right: var(--bd-hairline); }
.identity-table td { padding: 12px 16px; font-size: 14px; color: var(--c-ink-900); font-weight: 500; vertical-align: top; line-height: 1.5; font-variant-numeric: tabular-nums; }

/* Listes legal */
.legal-content ul { list-style: none; padding: 0; margin: var(--sp-3) 0 var(--sp-4); }
.legal-content ul li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-2); padding: 8px 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-ink-700); border-bottom: 1px dashed var(--c-ink-300); }
.legal-content ul li::before { content: "→"; color: var(--c-orange-600); font-weight: 700; }
.legal-content ul li:last-child { border-bottom: 0; }
.legal-content ul li strong { color: var(--c-ink-900); display: block; font-family: var(--font-display); font-weight: 600; }

/* Note encadrée */
.legal-note { background: var(--c-blue-100); border-left: 4px solid var(--c-blue-700); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0 var(--sp-5); }
.legal-note .tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-blue-700); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 4px; font-weight: 700; }
.legal-note p { font-size: 14px; line-height: 1.6; color: var(--c-ink-900); margin: 0; }

/* Doc footer */
.doc-footer { margin-top: var(--sp-12); padding: var(--sp-6); background: var(--c-ink-900); color: var(--c-bone-200); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: center; }
@media (max-width: 640px) { .doc-footer { grid-template-columns: 1fr; } }
.doc-footer .df-meta { font-family: var(--font-mono); font-size: 11px; color: var(--c-blue-300); letter-spacing: var(--tr-wide); text-transform: uppercase; line-height: 1.6; }
.doc-footer .df-meta strong { color: var(--c-bone-50); display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: var(--tr-snug); margin-bottom: 4px; }
.doc-footer .df-action { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--c-orange-600); color: #1a1000; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; letter-spacing: var(--tr-snug); transition: var(--tr-fast); }
.doc-footer .df-action:hover { background: var(--c-orange-500); color: #1a1000; }

/* Print styles : TOC cachée, doc-footer caché */
@media print {
  .legal-toc, .annonce, .header, .sticky-mobile, .footer, .doc-footer { display: none !important; }
  body { background: white; color: black; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-content { max-width: 100%; }
}

/* ============================================================
   Single post (single.php) — article de blog éditorial
   Extrait de maquettes-v2/Article Blog.html
   ============================================================ */

/* Barre de progression de lecture */
.progress-bar { position: fixed; top: 36px; left: 0; right: 0; height: 3px; background: transparent; z-index: 55; pointer-events: none; }
.progress-bar .fill { height: 100%; background: var(--c-orange-600); width: 0%; transition: width 0.1s; }
@media (max-width: 640px) { .progress-bar { top: 32px; } }

/* Article masthead */
.article-head { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); border-bottom: 2px solid var(--c-ink-900); }
.article-head .meta-top { display: flex; gap: var(--sp-3); align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); margin-bottom: var(--sp-6); text-transform: uppercase; flex-wrap: wrap; color: var(--c-ink-500); }
.article-head .meta-top .cat { color: var(--c-blue-700); background: var(--c-blue-100); padding: 4px 10px; font-weight: 500; }
.article-head .meta-top .sep { color: var(--c-ink-300); }
.article-head .meta-top .num { color: var(--c-orange-600); }

.article-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; max-width: 22ch; margin-bottom: var(--sp-6); color: var(--c-ink-900); }
.article-head h1 em { font-family: "Source Serif 4", "Times New Roman", serif; font-style: italic; font-weight: 500; color: var(--c-blue-700); }
.article-head .standfirst { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.45; color: var(--c-ink-700); max-width: 50ch; margin-bottom: var(--sp-8); font-style: italic; }
.article-head .standfirst strong { font-style: normal; color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; }

.author-strip { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center; padding-top: var(--sp-5); border-top: var(--bd-hairline); }
@media (max-width: 640px) { .author-strip { grid-template-columns: 1fr; gap: var(--sp-3); } }
.author-strip .avatar { width: 56px; height: 56px; background: var(--c-blue-700); color: var(--c-bone-50); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; letter-spacing: var(--tr-tight); }
.author-strip .name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--tr-snug); color: var(--c-ink-900); }
.author-strip .name small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); font-weight: 400; margin-top: 2px; text-transform: uppercase; }
.author-strip .stats { display: flex; gap: var(--sp-5); font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; }
.author-strip .stats > div { display: flex; flex-direction: column; gap: 2px; }
.author-strip .stats strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: var(--tr-snug); margin-top: 2px; }

/* Hero figure */
.article-hero-img { padding: var(--sp-10) 0; border-bottom: var(--bd-hairline); }
.hero-fig { aspect-ratio: 21/9; background: var(--c-blue-700); position: relative; overflow: hidden; border: 1.5px solid var(--c-ink-900); }
@media (max-width: 768px) { .hero-fig { aspect-ratio: 4/3; } }
.hero-fig .pattern { position: absolute; inset: 0; background-image:
  radial-gradient(circle at 30% 50%, rgba(255,255,255,0.12) 0, transparent 35%),
  radial-gradient(circle at 70% 60%, rgba(255,255,255,0.08) 0, transparent 40%),
  repeating-linear-gradient(0deg, transparent 0, transparent 60px, rgba(255,255,255,0.06) 60px, rgba(255,255,255,0.06) 61px),
  repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(255,255,255,0.06) 60px, rgba(255,255,255,0.06) 61px); }
.hero-fig .label-print { position: absolute; top: var(--sp-5); left: var(--sp-5); background: var(--c-bone-50); color: var(--c-ink-900); padding: 8px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); z-index: 2; }
.hero-fig .label-print strong { color: var(--c-blue-700); font-family: var(--font-display); font-weight: 700; }
.hero-fig .caption-overlay { position: absolute; bottom: var(--sp-5); left: var(--sp-5); right: var(--sp-5); background: rgba(12,24,37,0.88); color: var(--c-bone-50); padding: var(--sp-4) var(--sp-5); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); line-height: 1.6; backdrop-filter: blur(4px); z-index: 2; }
.hero-fig .caption-overlay strong { display: block; color: var(--c-orange-500); font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-bottom: 4px; letter-spacing: var(--tr-snug); text-transform: uppercase; }

/* Layout principal article */
.article-body { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 88px); }
.body-grid { display: grid; grid-template-columns: 220px 1fr 200px; gap: var(--sp-10); align-items: start; }
@media (max-width: 1100px) { .body-grid { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* TOC latérale */
.toc { position: sticky; top: 110px; align-self: start; padding: var(--sp-5); border: var(--bd-hairline); background: var(--c-bone-50); }
@media (max-width: 1100px) { .toc { position: relative; top: 0; } }
.toc h4 { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin: 0 0 var(--sp-3); padding-bottom: var(--sp-3); border-bottom: var(--bd-hairline); }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: tocCount; }
.toc ol li { counter-increment: tocCount; }
.toc ol li a { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-2); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); color: var(--c-ink-700); text-decoration: none; letter-spacing: var(--tr-snug); line-height: 1.4; padding: 4px 0; transition: var(--tr-fast); }
.toc ol li a::before { content: counter(tocCount, decimal-leading-zero); font-family: var(--font-mono); font-size: 10px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); padding-top: 2px; }
.toc ol li a:hover { color: var(--c-blue-700); }
.toc ol li a.active { color: var(--c-blue-700); font-weight: 700; }
.toc-share { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--bd-hairline); }
.toc-share h4 { margin-bottom: var(--sp-3); padding-bottom: 0; border-bottom: 0; }
.toc-share .ts-buttons { display: flex; gap: 6px; }
.toc-share .ts-buttons button { background: var(--c-bone-100); border: var(--bd-hairline); padding: 8px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-wide); cursor: pointer; color: var(--c-ink-700); flex: 1; transition: var(--tr-fast); }
.toc-share .ts-buttons button:hover { background: var(--c-ink-900); color: var(--c-bone-50); border-color: var(--c-ink-900); }

/* Corps article */
.article-body article { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; max-width: 64ch; margin: 0 auto; }
.article-body article > * { margin-bottom: var(--sp-5); }
.article-body article p { font-size: 1.125rem; line-height: 1.75; color: var(--c-ink-900); text-wrap: pretty; }
.article-body article p strong { font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); }
.article-body article p em { font-style: italic; color: var(--c-blue-700); }
.article-body article p.dropcap::first-letter { font-family: var(--font-display); font-weight: 800; font-size: 5rem; line-height: 0.85; float: left; padding: 8px 12px 0 0; color: var(--c-blue-700); letter-spacing: -0.04em; }

.article-body article h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; margin-top: var(--sp-10); margin-bottom: var(--sp-4); padding-top: var(--sp-5); border-top: 2px solid var(--c-ink-900); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: baseline; color: var(--c-ink-900); }
.article-body article h2::before { content: attr(data-num); font-family: var(--font-mono); font-size: 12px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); font-weight: 500; padding-top: 6px; }
.article-body article h2:not([data-num])::before { content: ""; padding: 0; }
.article-body article h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: var(--tr-snug); margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--c-ink-900); }

/* Pullquote */
.article-body .pullquote { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 1.625rem; line-height: 1.3; color: var(--c-ink-900); padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-6); border-left: 4px solid var(--c-orange-600); margin: var(--sp-8) 0; max-width: none; }
.article-body .pullquote::before { content: "« "; color: var(--c-orange-600); font-size: 3rem; line-height: 0.5; vertical-align: -0.2em; margin-right: 4px; font-style: normal; }
.article-body .pullquote::after { content: " »"; color: var(--c-orange-600); font-size: 3rem; line-height: 0.5; vertical-align: -0.2em; margin-left: 4px; font-style: normal; }
.article-body .pullquote-source { display: block; font-family: var(--font-mono); font-style: normal; font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-top: var(--sp-3); }

/* Info box */
.article-body .info-box { background: var(--c-blue-100); border: 1.5px solid var(--c-blue-700); padding: var(--sp-6); margin: var(--sp-8) 0; font-family: var(--font-display); }
.article-body .info-box .ib-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-blue-700); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-blue-700); display: flex; justify-content: space-between; }
.article-body .info-box .ib-tag strong { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: var(--tr-snug); text-transform: none; }
.article-body .info-box h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: var(--tr-snug); margin-bottom: var(--sp-3); }
.article-body .info-box p { font-size: 14px; line-height: 1.6; color: var(--c-ink-900); font-family: var(--font-body); }

/* Liste technique */
.article-body article ul { list-style: none; padding: 0; margin: var(--sp-5) 0; font-family: var(--font-body); }
.article-body article ul li { display: grid; grid-template-columns: 50px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--bd-hairline); font-size: var(--fs-md); line-height: 1.6; color: var(--c-ink-900); }
.article-body article ul li::before { content: attr(data-tag); font-family: var(--font-mono); font-size: 10px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); padding-top: 4px; font-weight: 500; }
.article-body article ul li:not([data-tag])::before,
.article-body article ul li:first-child:not([data-tag])::before { content: "→"; }
.article-body article ul li:first-child { border-top: var(--bd-hairline); }
.article-body article ul li strong { font-family: var(--font-display); font-weight: 700; }

/* Tableau */
.article-body .noise-table { width: 100%; border-collapse: collapse; margin: var(--sp-8) 0; background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); font-family: var(--font-display); }
.article-body .noise-table thead th { background: var(--c-ink-900); color: var(--c-bone-50); padding: 12px 14px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--tr-wide); text-transform: uppercase; text-align: left; }
.article-body .noise-table tbody tr { border-bottom: var(--bd-hairline); }
.article-body .noise-table tbody tr:last-child { border-bottom: 0; }
.article-body .noise-table td { padding: 12px 14px; font-size: 14px; vertical-align: top; line-height: 1.5; }
.article-body .noise-table td.symptom { font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); }
.article-body .noise-table td.diag { color: var(--c-ink-700); }
.article-body .noise-table td.urg { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide); text-align: right; white-space: nowrap; padding-top: 14px; }
.article-body .noise-table td.urg.green { color: var(--c-green-600); }
.article-body .noise-table td.urg.orange { color: var(--c-orange-600); }
.article-body .noise-table td.urg.red { color: var(--c-red-600); font-weight: 700; }

/* Note box */
.article-body .note-box { background: var(--c-orange-100); border-left: 4px solid var(--c-orange-600); padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0; font-family: var(--font-body); }
.article-body .note-box .nb-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-orange-700); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 4px; font-weight: 700; }
.article-body .note-box p { font-size: 14px; line-height: 1.6; color: var(--c-ink-900); margin: 0; }

/* Annex */
.annex { position: sticky; top: 110px; }
@media (max-width: 1100px) { .annex { position: relative; top: 0; margin-top: var(--sp-6); } }
.annex-card { background: var(--c-ink-900); color: var(--c-bone-50); padding: var(--sp-5); }
.annex-card .ac-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-orange-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.2); }
.annex-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.15; color: var(--c-bone-50); margin-bottom: var(--sp-3); letter-spacing: var(--tr-snug); }
.annex-card p { font-size: 13px; color: var(--c-blue-300); line-height: 1.6; margin-bottom: var(--sp-4); }
.annex-card .ac-cta { display: block; padding: 10px 14px; background: var(--c-orange-600); color: #1a1000; font-family: var(--font-display); font-weight: 700; font-size: 13px; text-decoration: none; text-align: center; letter-spacing: var(--tr-snug); }
.annex-card .ac-cta:hover { background: var(--c-orange-500); color: #1a1000; }
.annex-card .ac-tel { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 800; color: var(--c-bone-50); font-size: 1.125rem; text-decoration: none; font-variant-numeric: tabular-nums; text-align: center; padding: 10px; border: 1.5px solid var(--c-bone-50); }
.annex-card .ac-tel:hover { background: var(--c-bone-50); color: var(--c-ink-900); }

.annex-related { margin-top: var(--sp-5); padding: var(--sp-5); border: var(--bd-hairline); background: var(--c-bone-50); }
.annex-related h4 { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-transform: uppercase; margin: 0 0 var(--sp-3); padding-bottom: var(--sp-3); border-bottom: var(--bd-hairline); }
.annex-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.annex-related ul li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-2); font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 1.4; border: 0; padding: 0; }
.annex-related ul li::before { content: "→"; color: var(--c-orange-600); font-weight: 700; padding-top: 0; }
.annex-related ul li a { color: var(--c-ink-900); text-decoration: none; }
.annex-related ul li a:hover { color: var(--c-blue-700); }

/* Article footer */
.article-foot { padding: clamp(40px, 6vw, 64px) 0; border-top: 2px solid var(--c-ink-900); background: var(--c-bone-100); }
.bio-card { display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-5); padding: var(--sp-6); background: var(--c-bone-50); border: 1.5px solid var(--c-ink-900); margin-bottom: var(--sp-8); align-items: start; }
@media (max-width: 640px) { .bio-card { grid-template-columns: 1fr; } }
.bio-card .avatar { width: 90px; height: 90px; background: var(--c-blue-700); color: var(--c-bone-50); font-family: var(--font-display); font-weight: 800; font-size: 2rem; display: flex; align-items: center; justify-content: center; letter-spacing: var(--tr-tight); }
.bio-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: var(--tr-snug); margin-bottom: 4px; }
.bio-card .role { font-family: var(--font-mono); font-size: 11px; color: var(--c-orange-600); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: var(--sp-3); }
.bio-card p { font-size: 14px; color: var(--c-ink-700); line-height: 1.6; max-width: 60ch; }

.nav-articles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--c-ink-900); }
@media (max-width: 640px) { .nav-articles { grid-template-columns: 1fr; } }
.nav-articles a { padding: var(--sp-5) var(--sp-6); text-decoration: none; color: inherit; transition: var(--tr-fast); background: var(--c-bone-50); }
.nav-articles a:first-child { border-right: var(--bd-hairline); }
@media (max-width: 640px) { .nav-articles a:first-child { border-right: 0; border-bottom: var(--bd-hairline); } }
.nav-articles a:hover { background: var(--c-bone-100); }
.nav-articles .nav-tag { font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); margin-bottom: 8px; text-transform: uppercase; }
.nav-articles .nav-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.2; letter-spacing: var(--tr-snug); color: var(--c-ink-900); }
.nav-articles a.next { text-align: right; }

/* ============================================================
   Intro éditoriale IA (template-local.php) — section unique par ville
   ============================================================ */
.local-intro-ia { padding: clamp(56px, 8vw, 96px) 0; background: var(--c-bone-50); }
.local-intro-ia .intro-ia-content { font-family: "Source Serif 4", Georgia, serif; max-width: 100%; margin: 0 auto; }
.local-intro-ia .intro-ia-content p { font-size: 1.1875rem; line-height: 1.75; color: var(--c-ink-900); margin-bottom: var(--sp-6); text-wrap: pretty; }
.local-intro-ia .intro-ia-content p:last-child { margin-bottom: 0; }
.local-intro-ia .intro-ia-content p strong { font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); }
.local-intro-ia .intro-ia-content p em { font-style: italic; color: var(--c-blue-700); }
/* Premier paragraphe avec barre verticale orange à gauche pour le côté éditorial */
.local-intro-ia .intro-ia-content p:first-child { padding-left: var(--sp-5); border-left: 3px solid var(--c-orange-600); }

/* ============================================================
   Formulaire devis simple (1 step) — overrides template-contact
   ============================================================ */
.form-simple .field { margin-bottom: var(--sp-4); }
.form-simple .field label { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-700); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 6px; }
.form-simple .field label .req { color: var(--c-red-600); }
.form-simple .field input[type="text"],
.form-simple .field input[type="tel"],
.form-simple .field input[type="email"],
.form-simple .field select,
.form-simple .field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-ink-900);
  background: var(--c-bone-50);
  border: 1.5px solid var(--c-ink-100);
  border-radius: 0;
  outline: none;
  transition: var(--tr-fast);
  box-sizing: border-box;
}
.form-simple .field input:focus,
.form-simple .field select:focus,
.form-simple .field textarea:focus {
  border-color: var(--c-blue-700);
  background: var(--c-bone-50);
}
.form-simple .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.form-simple .field-row .field { margin-bottom: 0; }
@media (max-width: 540px) { .form-simple .field-row { grid-template-columns: 1fr; } }
.form-simple textarea { resize: vertical; min-height: 100px; font-family: var(--font-body); line-height: 1.55; }

.form-simple .rgpd-row { display: flex; align-items: flex-start; gap: 10px; padding: var(--sp-4) 0; margin-bottom: var(--sp-3); }
.form-simple .rgpd-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--c-blue-700); }
.form-simple .rgpd-row label { font-family: var(--font-body); font-size: 12px; color: var(--c-ink-700); line-height: 1.5; text-transform: none; letter-spacing: 0; margin-bottom: 0; }
.form-simple .rgpd-row label a { color: var(--c-blue-700); border-bottom: 1px solid var(--c-blue-700); }

.form-simple .form-actions-end { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }
.form-simple .btn-submit {
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  background: var(--c-orange-600);
  color: #1a1000;
  border: 0;
  cursor: pointer;
  letter-spacing: var(--tr-snug);
  transition: var(--tr-fast);
}
.form-simple .btn-submit:hover { background: var(--c-orange-500); }
.form-simple .btn-submit:disabled { opacity: 0.6; cursor: wait; }

.form-simple .form-alt { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--bd-hairline); font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-500); letter-spacing: var(--tr-wide); text-align: center; text-transform: uppercase; }
.form-simple .form-alt a { color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-snug); text-transform: none; font-size: 14px; }
.form-simple .form-alt a:hover { color: var(--c-blue-700); }

/* ============================================================
   Photo service en hero des landings (template-local.php)
   Branchée via .arr16-map.has-service-photo + custom prop --pmd-service-bg
   ============================================================ */
.arr16-map.has-service-photo {
  background-image: var(--pmd-service-bg) !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  background-color: var(--c-blue-700);
}
.arr16-map.has-service-photo > .map-tag,
.arr16-map.has-service-photo > .map-bot {
  z-index: 3;
  position: absolute;
}
.arr16-map.has-service-photo > .map-bot {
  bottom: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between;
  background: rgba(12,24,37,0.85);
  color: var(--c-bone-50);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.arr16-map.has-service-photo > .map-tag {
  top: 16px; left: 16px;
}

/* ============================================================
   Photos sur placeholders (signature 1990€, à propos express, etc.)
   Quand pmd_photo_* est setté en BO, le placeholder rayé est remplacé
   par background-image cover + overlays gardés au-dessus
   ============================================================ */

/* Section signature 1990€ (homepage) */
.sig-visual.has-photo {
  background-image: var(--pmd-sig-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: var(--c-bone-100);
}
.sig-visual.has-photo::before { content: none !important; }  /* retire le motif rayé hérité */
.sig-visual.has-photo .sig-visual-tag,
.sig-visual.has-photo .sig-visual-overlay { z-index: 3; }

/* À propos express (homepage) */
.apropos-photo.has-photo {
  background-image: var(--pmd-about-bg) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
/* Bande floutée inclinée pour suivre l'arc du numéro 06 imprimé au dos
   du blouson (le texte arrondi descend de gauche à droite sur cet angle
   de vue). On élargit la bande au-delà du conteneur (left: -15%, width: 130%)
   pour qu'après rotation, les coins couvrent toute la largeur visible. */
.apropos-photo.has-photo::before {
  content: "";
  position: absolute;
  top: 62%; left: -20%; width: 140%; height: 20%;
  transform: rotate(14deg);
  transform-origin: center;
  backdrop-filter: blur(16px) saturate(0.85);
  -webkit-backdrop-filter: blur(16px) saturate(0.85);
  background: rgba(11,17,32,0.10);
  z-index: 2; pointer-events: none;
}
/* Voile dégradé doux sur le bas pour intégrer le tag */
.apropos-photo.has-photo::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 20%;
  background: linear-gradient(to top, rgba(11,17,32,0.78) 0%, rgba(11,17,32,0.20) 70%, transparent 100%);
  z-index: 2; pointer-events: none;
}
.apropos-photo.has-photo .ph-tag { z-index: 3; position: relative; color: #fff; background: rgba(11,17,32,0.65); border-color: rgba(255,255,255,0.2); }

/* Hero des pages Service (template-service.php) */
.svc-hero-visual.has-photo {
  background: var(--pmd-svc-bg) center top/cover no-repeat var(--c-ink-900) !important;
  border: 0;
  padding: 0 !important;
  aspect-ratio: 4/5;
  max-height: 620px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
/* Voile dégradé en bas pour faire respirer le tag */
.svc-hero-visual.has-photo::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(11,17,32,0.85) 0%, rgba(11,17,32,0.35) 60%, transparent 100%);
  z-index: 1;
}
.svc-hero-visual.has-photo svg.illus,
.svc-hero-visual.has-photo .label,
.svc-hero-visual.has-photo .desc { display: none; }
.svc-hero-visual.has-photo .svc-hero-tag {
  position: absolute; left: var(--sp-5); right: auto; bottom: var(--sp-5); top: auto;
  z-index: 3;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-orange-500);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.svc-hero-visual.has-photo .svc-hero-tag strong { font-weight: 700; }

/* ============================================================
   Google Maps embed (template-parts/google-map.php)
   Stylé DA PMD-GAZ : cadre arrondi, tag mono overlay, voile DA
   ============================================================ */
.gmap-frame {
  position: relative;
  aspect-ratio: var(--gmap-ratio, 4/5);
  width: 100%;
  background: var(--c-bone-100);
  border: 1px solid var(--c-blue-100);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px -10px rgba(11,17,32,0.18);
}
.gmap-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  /* Harmonise les couleurs Google Maps avec la palette bone/blue */
  filter: grayscale(35%) saturate(85%) contrast(95%);
  transition: filter 0.3s ease;
}
.gmap-frame:hover iframe { filter: grayscale(0%) saturate(100%) contrast(100%); }
.gmap-tag {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  z-index: 3;
  display: inline-flex; flex-direction: column; gap: 2px;
  background: var(--c-ink-900); color: #fff;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  max-width: calc(100% - var(--sp-8));
  line-height: 1.4;
}
.gmap-tag strong { font-weight: 700; color: var(--c-orange-500); letter-spacing: 0.5px; }
.gmap-tag-sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
}
.gmap-cta {
  position: absolute; bottom: var(--sp-4); right: var(--sp-4);
  z-index: 3;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-orange-500); color: #1a1000;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, background 0.18s ease;
}
.gmap-cta:hover { background: var(--c-orange-600); transform: translateY(-1px); }
.gmap-cta svg { transition: transform 0.18s ease; }
.gmap-cta:hover svg { transform: translateX(2px); }

/* Variant carte compacte (À propos) */
.gmap-frame--card { aspect-ratio: 1/1; }

/* Variant large (Contact — column right de la map-grid) */
.gmap-frame--lg { max-height: 560px; }

/* Variant bandeau footer global (toutes pages) */
.footer-map { margin-bottom: var(--sp-12); padding-bottom: var(--sp-10); border-bottom: 1px solid rgba(255,255,255,0.08); }
.gmap-frame--footer {
  aspect-ratio: 16/5;
  max-height: 280px;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 8px 28px -12px rgba(0,0,0,0.5);
}
.gmap-frame--footer iframe { filter: grayscale(55%) saturate(75%) contrast(95%) brightness(0.92); }
.gmap-frame--footer:hover iframe { filter: grayscale(0%) saturate(100%) contrast(100%) brightness(1); }
@media (max-width: 768px) {
  .gmap-frame--footer { aspect-ratio: 4/3; max-height: 320px; }
  .footer-map { margin-bottom: var(--sp-8); padding-bottom: var(--sp-6); }
}

@media (max-width: 768px) {
  .gmap-frame { aspect-ratio: 1/1; }
  .gmap-tag { font-size: 9px; padding: var(--sp-1) var(--sp-2); }
  .gmap-cta { font-size: 10px; padding: var(--sp-1) var(--sp-2); }
}

/* Hero portrait page À propos (template-apropos.php) */
.portrait-frame.has-photo {
  background: var(--pmd-apropos-bg) center/cover no-repeat var(--c-bone-100) !important;
  border-radius: 14px;
  overflow: hidden;
}
.portrait-frame.has-photo .ph-tag { z-index: 3; position: relative; }

/* ============================================================
   Index complet du zone hub : 4 services × N communes
   Renforce le maillage SEO + UX exploratoire
   ============================================================ */
.zh-mesh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }
@media (max-width: 1024px) { .zh-mesh-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
@media (max-width: 600px) { .zh-mesh-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
.zh-mesh-col { background: var(--c-bone-50); border: var(--bd-hairline); padding: var(--sp-5); }
.zh-mesh-title {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: var(--tr-snug); color: var(--c-blue-700);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: var(--bd-hairline);
}
.zh-mesh-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.zh-mesh-list li { padding: 0; border: 0; display: block; }
.zh-mesh-list a {
  display: block; padding: 4px 0;
  font-size: 13px; color: var(--c-ink-700);
  text-decoration: none; transition: color 0.12s ease;
}
.zh-mesh-list a:hover { color: var(--c-orange-600); }

/* ============================================================
   Maillage interne en bas des landings (template-local.php)
   Section "autres services dans cette ville" + "villes proches du dept"
   ============================================================ */
.local-mesh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
@media (max-width: 768px) { .local-mesh-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.local-mesh-block { padding: var(--sp-6); background: var(--c-bone-50); border: var(--bd-hairline); }
.local-mesh-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--tr-snug); color: var(--c-ink-900); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: var(--bd-hairline); }
.local-mesh-list { list-style: none; padding: 0; margin: 0; }
.local-mesh-list li { padding: 0; border: 0; display: block; }
.local-mesh-list li::before { content: none; }
.local-mesh-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed var(--c-ink-100);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.4;
  color: var(--c-ink-900); text-decoration: none;
  transition: var(--tr-fast);
}
.local-mesh-list a:hover { color: var(--c-blue-700); padding-inline: 6px; }
.local-mesh-list a .arrow { color: var(--c-ink-300); font-weight: 400; transition: var(--tr-fast); }
.local-mesh-list a:hover .arrow { color: var(--c-orange-600); transform: translateX(3px); }
.local-mesh-list li:last-child a { border-bottom: 0; }
.local-mesh-foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--bd-hairline); }
.local-mesh-foot a { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--c-blue-700); text-decoration: none; letter-spacing: var(--tr-snug); }
.local-mesh-foot a:hover { color: var(--c-orange-600); }

/* ============================================================
   FINAL FIX — Mobile navbar (override cascade conflicts)
   Plusieurs rules .nav { display: flex } provenant des maquettes
   importées étaient déclarées APRÈS la media query mobile, ce qui
   forçait le nav desktop à rester visible sur mobile (6 liens coupés
   après "Services" car débordant à droite). On force ici la règle
   finale avec un selector plus spécifique (.header .nav) + override
   final pour les viewports <1024px.
   ============================================================ */
@media (max-width: 1023px) {
  .header .nav { display: none !important; }
  .nav-toggle  { display: inline-flex !important; }
  /* Évite l'effet "menu coupé" si jamais le drawer s'ouvre derrière
     l'announce bar : on remonte sa z-index au-dessus de tout. */
  .mobile-nav { z-index: 200 !important; }
  /* Quand le drawer est ouvert, on masque l'announce pour éviter
     toute superposition visuelle. */
  body:has(.mobile-nav:not([hidden])) .annonce { display: none; }
}

/* ============================================================
   FULL-SCREEN MOBILE NAV — override fort de toute la cascade
   Drawer plein écran avec header (logo + croix) + nav verticale.
   ============================================================ */
@media (max-width: 1023px) {
  .mobile-nav {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--c-bone-50) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-nav[hidden] { display: none !important; }

  .mobile-nav-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1.5px solid var(--c-ink-900);
    background: var(--c-bone-50);
  }
  .mobile-nav-logo {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    text-decoration: none;
    color: var(--c-ink-900);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: var(--tr-snug);
  }
  .mobile-nav-logo .pmd-logo,
  .mobile-nav-logo svg,
  .mobile-nav-logo img { width: 32px; height: auto; }
  .mobile-nav-close {
    background: transparent;
    border: 1.5px solid var(--c-ink-900);
    color: var(--c-ink-900);
    width: 48px; height: 48px;
    border-radius: var(--r-sm);
    display: inline-flex !important;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: var(--tr-fast);
    padding: 0;
    font-family: var(--font-display);
    line-height: 1;
  }
  .mobile-nav-close span {
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    display: block;
    margin-top: -4px;
  }
  .mobile-nav-close:hover,
  .mobile-nav-close:active {
    background: var(--c-ink-900);
    color: var(--c-bone-50);
  }

  .mobile-nav nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex: 1;
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
  }
  .mobile-nav nav a {
    display: block !important;
    padding: var(--sp-5) 0 !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    color: var(--c-ink-900) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--c-ink-100) !important;
    letter-spacing: var(--tr-snug) !important;
    transition: color 0.15s ease !important;
  }
  .mobile-nav nav a:hover,
  .mobile-nav nav a:active { color: var(--c-blue-700) !important; }

  .mobile-nav nav a.tel {
    margin-top: auto !important;
    padding: var(--sp-5) var(--sp-6) !important;
    background: var(--c-orange-500) !important;
    color: var(--c-ink-900) !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 16px rgba(11,17,32,0.12);
  }
  .mobile-nav nav a.tel:hover { background: var(--c-orange-600) !important; }

  body:has(.mobile-nav:not([hidden])) .annonce { display: none !important; }
}

/* ============================================================
   LOGOS CAROUSEL — infini, sans JS (CSS marquee)
   2 sections : partenaires de confiance + marques chaudières.
   Animation translateX en boucle continue avec liste dupliquée.
   ============================================================ */
.logos-section {
  padding: var(--sp-12) 0;
  background: var(--c-bone-50);
  border-top: 1px solid var(--c-ink-100);
  border-bottom: 1px solid var(--c-ink-100);
}
.logos-section--brands {
  background: var(--c-bone-100);
}
.logos-section-head {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.logos-section-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-blue-700);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.logos-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-ink-900);
  margin: 0;
}
.logos-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logos-track {
  display: flex;
  gap: var(--sp-8);
  width: max-content;
  animation: logos-scroll var(--speed, 40s) linear infinite;
}
.logos-marquee:hover .logos-track {
  animation-play-state: paused;
}
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* on parcourt 50% car la liste est dupliquée */
}

.logo-card {
  flex: 0 0 auto;
  height: 80px;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-ink-100);
  border-radius: var(--r-md);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.logo-card:hover {
  border-color: var(--c-ink-300);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -8px rgba(11, 17, 32, 0.15);
}
.logo-card img {
  max-height: 48px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.logo-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--c-ink-700);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.logo-card:hover .logo-text { color: var(--c-blue-700); }

/* Accessible mais visuellement caché */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Mobile : cards plus compactes */
@media (max-width: 640px) {
  .logos-section { padding: var(--sp-8) 0; }
  .logo-card { height: 64px; min-width: 140px; padding: var(--sp-3) var(--sp-4); }
  .logo-card img { max-height: 36px; max-width: 110px; }
  .logo-text { font-size: 0.8rem; }
  .logos-track { gap: var(--sp-5); }
}

/* Respect des préférences réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation-duration: 120s; }
}