/* CHIPTEK DIAG AUTO 44 - charte graphique reprise de la plaquette :
   fond noir/anthracite, rouge vif, blanc, icones hexagonales, typographie
   condensee en majuscules pour les titres. */

:root {
    --ck-black: #0a0a0d;
    --ck-black-soft: #131318;
    --ck-panel: #1a1a21;
    --ck-panel-border: #2a2a33;
    --ck-red: #e30613;
    --ck-red-dark: #b0050f;
    --ck-white: #ffffff;
    --ck-grey: #9a9aa5;
    --ck-grey-light: #c9c9d2;
    --ck-success: #2fbf71;
    --ck-warning: #e3a306;
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;
    --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--ck-black);
    color: var(--ck-white);
    font-family: var(--font-body);
    line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    margin: 0 0 0.5em;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
    background: var(--ck-black);
    border-bottom: 1px solid var(--ck-panel-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
}

.brand {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    text-transform: uppercase;
}
.brand-logo { display: block; height: 42px; width: auto; }
.brand-logo--footer { height: 46px; }

.nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav a.nav-link {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--ck-grey-light);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.nav a.nav-link:hover, .nav a.nav-link.active {
    color: var(--ck-white);
    border-color: var(--ck-red);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 11px 22px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn-primary { background: var(--ck-red); color: var(--ck-white); }
.btn-primary:hover { background: var(--ck-red-dark); box-shadow: 0 10px 24px rgba(227, 6, 19, .35); }
.btn-outline { border-color: var(--ck-red); color: var(--ck-white); background: transparent; }
.btn-outline:hover { background: var(--ck-red); box-shadow: 0 10px 24px rgba(227, 6, 19, .3); }
.btn-ghost { color: var(--ck-grey-light); background: transparent; border-color: var(--ck-panel-border); }
.btn-ghost:hover { border-color: var(--ck-grey-light); color: var(--ck-white); }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):active { transform: translateY(0); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background: linear-gradient(120deg, var(--ck-black) 45%, var(--ck-black-soft) 100%);
    padding: 90px 0 70px;
    overflow: hidden;
    border-bottom: 1px solid var(--ck-panel-border);
}
.hero__inner { position: relative; z-index: 2; max-width: 640px; }

/* Photo (outil de diagnostic Autel en situation) : carte encadree flottant a
   droite du hero, plutot qu'un fond plein cadre (qui coupait la tablette vu
   le format tres large/bas du hero). Illustre concretement les prestations :
   Diagnostic / Codage / Programmation / Adaptations visibles a l'ecran. */
.hero__photo {
    position: absolute;
    z-index: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: clamp(220px, 40vh, 400px);
    width: auto;
    max-width: 44%;
    aspect-ratio: 706 / 680;
    border-radius: 14px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(227, 6, 19, .35);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 40px rgba(227, 6, 19, .12);
    filter: brightness(.94) saturate(1.05);
    animation: heroPhotoZoom 26s ease-in-out infinite alternate;
}
.hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, transparent 55%, rgba(10, 10, 13, .55) 100%);
}
@keyframes heroPhotoZoom {
    from { background-size: 100% 100%; }
    to   { background-size: 112% 112%; }
}
@media (max-width: 1180px) {
    .hero__photo { max-width: 40%; }
}
@media (max-width: 992px) {
    .hero__photo { display: none; }
}
.hero__eyebrow {
    color: var(--ck-red);
    font-family: var(--font-display);
    letter-spacing: 0.25em;
    font-size: 0.85rem;
    margin-bottom: 14px;
}
.hero h1 { font-size: 3rem; line-height: 1.05; margin-bottom: 18px; }
.hero h1 .accent { color: var(--ck-red); }
.hero p.lead { color: var(--ck-grey-light); font-size: 1.1rem; margin-bottom: 30px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Decor circuit-board en fond de hero : echo du logo (traces + noeuds). */
.hero__circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.hero__circuit path {
    fill: none;
    stroke: var(--ck-red);
    stroke-width: 1.5;
    opacity: .28;
}
.hero__circuit .node {
    fill: var(--ck-red);
    animation: nodePulse 2.6s ease-in-out infinite;
}
.hero__circuit .node:nth-of-type(2) { animation-delay: .5s; }
.hero__circuit .node:nth-of-type(3) { animation-delay: 1s; }
.hero__circuit .node:nth-of-type(4) { animation-delay: 1.5s; }
.hero__circuit .node:nth-of-type(5) { animation-delay: 2s; }
@keyframes nodePulse {
    0%, 100% { opacity: .35; r: 4; }
    50%      { opacity: 1; r: 6; }
}

/* Badges "lecture en direct" : rappellent qu'un vrai outil de diagnostic tourne. */
.hero__status {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .05em;
    color: var(--ck-grey-light);
    background: rgba(10, 10, 13, .6);
    border: 1px solid var(--ck-panel-border);
    padding: 7px 14px;
    border-radius: 20px;
    animation: statusFloat 5s ease-in-out infinite;
}
.hero__status .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ck-red);
    box-shadow: 0 0 8px var(--ck-red);
    animation: nodePulse 1.6s ease-in-out infinite;
}
.hero__status--1 { top: 16%; right: 4%; animation-delay: 0s; }
.hero__status--2 { top: 46%; right: 9%; animation-delay: 1.6s; }
.hero__status--3 { bottom: 12%; right: 2%; animation-delay: 3.2s; }
@keyframes statusFloat {
    0%, 100% { opacity: 0; transform: translateY(8px); }
    10%, 85% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 992px) {
    .hero__circuit, .hero__status { display: none; }
}

/* Balayage lumineux unique au chargement, comme un outil de diag qui scanne le vehicule. */
.hero__scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -160px;
    width: 160px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(227, 6, 19, .14), transparent);
    animation: heroScan 2.4s cubic-bezier(.2, .7, .3, 1) 1;
    animation-delay: .4s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes heroScan {
    0%   { left: -160px; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.hero__circuit {
    transition: transform .3s ease-out;
}

/* ---------- Ticker (bandeau defilant) ---------- */
.ticker {
    background: var(--ck-black-soft);
    border-bottom: 1px solid var(--ck-panel-border);
    overflow: hidden;
    padding: 12px 0;
}
.ticker__track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: tickerScroll 26s linear infinite;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ticker__track span:not(.sep) { color: var(--ck-grey-light); padding: 0 10px; }
.ticker__track .sep { color: var(--ck-red); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Hexagon icon ---------- */
.hex-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
    background: var(--ck-black-soft);
    border: 2px solid var(--ck-red);
}
.hex-icon svg { width: 28px; height: 28px; stroke: var(--ck-red); fill: none; }

/* ---------- Reveal on scroll + "live diagnostic" icon effects ----------
   Chaque metier (diagnostic / codage / electronique) recoit un micro-effet
   qui evoque son propre geste : lecture d'un oscillo, flash de donnees vers
   le calculateur, courant qui parcourt un circuit. Un seul mecanisme commun
   (le hexagone qui "s'allume") relie les trois. */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--reveal-i, 0) * .08s);
}
.reveal .hex-icon,
.reveal.hex-icon {
    transition: transform .3s ease, box-shadow .3s ease;
}
.reveal.is-visible .hex-icon,
.reveal.hex-icon.is-visible {
    animation: hexPowerOn .6s cubic-bezier(.16, .84, .44, 1) both;
    animation-delay: calc(var(--reveal-i, 0) * .12s);
}
@keyframes hexPowerOn {
    0%   { transform: scale(.7); box-shadow: 0 0 0 rgba(227, 6, 19, 0); }
    55%  { transform: scale(1.08); box-shadow: 0 0 20px rgba(227, 6, 19, .55); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(227, 6, 19, 0); }
}

.service-row:hover .hex-icon,
.card:hover .hex-icon,
.hex-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(227, 6, 19, .25);
}

/* Diagnostic : le trace de mesure se redessine, comme un oscillo qui capture un signal. */
[data-icon="diagnostic"] svg polyline {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}
[data-icon="diagnostic"]::before {
    content: "";
    position: absolute;
    inset: -6px;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
    border: 1px solid var(--ck-red);
    opacity: 0;
    pointer-events: none;
}
.service-row:hover [data-icon="diagnostic"] svg polyline,
.card:hover [data-icon="diagnostic"] svg polyline,
[data-icon="diagnostic"]:hover svg polyline {
    animation: diagTrace 1.2s ease-in-out infinite;
}
.service-row:hover [data-icon="diagnostic"]::before,
.card:hover [data-icon="diagnostic"]::before,
[data-icon="diagnostic"]:hover::before {
    animation: diagPing 1.2s ease-out infinite;
}
@keyframes diagTrace {
    0%   { stroke-dashoffset: 100; opacity: .35; }
    50%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -100; opacity: .35; }
}
@keyframes diagPing {
    0%   { opacity: .55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* Codage : les broches du calculateur "recoivent" les donnees, l'une apres l'autre. */
[data-icon="codage"] svg line { transition: stroke .15s ease; }
.service-row:hover [data-icon="codage"] svg line,
.card:hover [data-icon="codage"] svg line,
[data-icon="codage"]:hover svg line {
    animation-name: pinFlash;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
[data-icon="codage"] svg line:nth-of-type(1) { animation-delay: 0ms; }
[data-icon="codage"] svg line:nth-of-type(2) { animation-delay: 90ms; }
[data-icon="codage"] svg line:nth-of-type(3) { animation-delay: 180ms; }
[data-icon="codage"] svg line:nth-of-type(4) { animation-delay: 270ms; }
[data-icon="codage"] svg line:nth-of-type(5) { animation-delay: 360ms; }
[data-icon="codage"] svg line:nth-of-type(6) { animation-delay: 450ms; }
[data-icon="codage"] svg line:nth-of-type(7) { animation-delay: 540ms; }
[data-icon="codage"] svg line:nth-of-type(8) { animation-delay: 630ms; }
@keyframes pinFlash {
    0%, 100% { stroke: var(--ck-red); opacity: 1; }
    50%      { stroke: var(--ck-white); opacity: .55; }
}

/* Electronique : le courant parcourt le circuit et le trait s'illumine au passage. */
[data-icon="electronique"] svg path {
    stroke-dasharray: 26 74;
    stroke-dashoffset: 0;
}
.service-row:hover [data-icon="electronique"] svg path,
.card:hover [data-icon="electronique"] svg path,
[data-icon="electronique"]:hover svg path {
    animation: currentFlow 1.1s linear infinite, currentGlow 1.1s ease-in-out infinite;
}
@keyframes currentFlow {
    to { stroke-dashoffset: -100; }
}
@keyframes currentGlow {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(227, 6, 19, .3)); }
    50%      { filter: drop-shadow(0 0 6px rgba(227, 6, 19, .9)); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal .hex-icon, .hex-icon, [data-icon] svg *, [data-icon]::before,
    .hero__circuit .node, .hero__status, .hero__status .dot, .ticker__track,
    .tilt-card, .tilt-card__glare, .hero__scan, .hero__circuit, .service-row,
    .hero__photo, .filter-chip.is-active, .section-title .kicker::after {
        animation: none !important;
        transition: none !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero__status { opacity: 1 !important; transform: none !important; }
    .hero__scan { display: none !important; }
    .section-title .kicker::after { transform: translateX(-50%) scaleX(1) !important; }
}

/* ---------- Service blocks ---------- */
.services-strip { padding: 70px 0; background: var(--ck-black); }

/* Chips de filtre par expertise : au-dessus de la liste, permettent d'isoler
   une expertise sans quitter la page. */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 10px;
}
.filter-chip {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--ck-panel-border);
    background: var(--ck-black-soft);
    color: var(--ck-grey-light);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.filter-chip:hover { border-color: var(--ck-red); color: var(--ck-white); transform: translateY(-1px); }
.filter-chip.is-active {
    background: var(--ck-red);
    border-color: var(--ck-red);
    color: var(--ck-white);
    box-shadow: 0 6px 16px rgba(227, 6, 19, .3);
    animation: chipPop .35s ease;
}
@keyframes chipPop {
    40% { transform: scale(1.08); }
}
.filter-count {
    text-align: center;
    color: var(--ck-grey);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.service-row {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 22px 0;
    border-top: 1px solid var(--ck-panel-border);
    max-height: 240px;
    overflow: hidden;
    transition: opacity .35s ease, transform .35s ease, max-height .4s ease, padding .4s ease, border-color .4s ease;
}
.service-row:first-of-type { border-top: none; }
/* Filtre actif sur une seule expertise : plus qu'une carte visible, le trait
   de separation entre lignes n'a plus lieu d'etre. */
.service-list.is-single-filter .service-row { border-top-color: transparent; }
.service-row h3 { margin: 0 0 6px; font-size: 1.15rem; }
.service-row p { margin: 0; color: var(--ck-grey-light); font-size: 0.95rem; }
.service-row.is-filtered-out {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    pointer-events: none;
}

.section { padding: 70px 0; }
.section-alt { background: var(--ck-black-soft); }
.section-title { text-align: center; margin-bottom: 44px; }
.section-title .kicker {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    color: var(--ck-red);
    font-family: var(--font-display);
    letter-spacing: 0.2em;
    font-size: 0.85rem;
}
.section-title .kicker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 2px;
    width: 32px;
    background: var(--ck-red);
    transform: translateX(-50%) scaleX(0);
    animation: kickerDraw .6s ease .25s both;
}
.section-title h2 { font-size: 2.1rem; }
@keyframes kickerDraw {
    to { transform: translateX(-50%) scaleX(1); }
}

.cards-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 34px; }
.card {
    background: var(--ck-panel);
    border: 1px solid var(--ck-panel-border);
    border-radius: var(--radius);
    padding: 26px;
}
.card:hover { border-color: var(--ck-red); }

/* Ligne de circuit reliant les trois cartes : "elles sont sur le meme bus". */
.cards-grid__trace {
    position: absolute;
    top: -18px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ck-panel-border) 10%, var(--ck-panel-border) 90%, transparent);
    overflow: visible;
}
.cards-grid__trace::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ck-red);
    box-shadow: 0 0 10px var(--ck-red);
    animation: traceRun 4s linear infinite;
}
@keyframes traceRun {
    0%   { left: 0; opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { left: calc(100% - 7px); opacity: 0; }
}
@media (max-width: 900px) {
    .cards-grid__trace { display: none; }
}

/* ---------- Cartes 3D (tilt + reflet au mouvement de la souris) ---------- */
.tilt-card {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
    will-change: transform;
}
.tilt-card__content { position: relative; z-index: 1; }
.tilt-card__glare {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(227, 6, 19, .22), transparent 55%);
    transition: opacity .3s ease;
    pointer-events: none;
}
.tilt-card:hover .tilt-card__glare { opacity: 1; }
@media (prefers-reduced-motion: reduce), (hover: none) {
    .tilt-card { transform: none !important; }
}

/* ---------- Empty state (reutilise cote public, ex: galerie vide) ---------- */
.empty-state { text-align: center; padding: 46px 20px; color: var(--ck-grey); }
.empty-state .hex-icon { margin: 0 auto 14px; }
.empty-state p { max-width: 360px; margin: 0 auto; }

/* ---------- Galerie ---------- */
.gallery-item {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--ck-panel-border);
    background: var(--ck-panel);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.gallery-item:hover { border-color: var(--ck-red); }
.gallery-item__content { display: block; }
.gallery-item__content img { display: block; width: 100%; height: 220px; object-fit: cover; }
.gallery-item__caption {
    display: block;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--ck-grey-light);
}
.gallery-item.is-filtered-out { display: none; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(5, 5, 7, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox__figure { max-width: 92vw; max-height: 88vh; margin: 0; text-align: center; }
.lightbox__figure img { display: block; max-width: 92vw; max-height: 80vh; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lightbox__figure figcaption {
    color: var(--ck-grey-light);
    margin-top: 14px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ck-panel);
    border: 1px solid var(--ck-panel-border);
    color: var(--ck-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease;
}
.lightbox__close:hover { border-color: var(--ck-red); }
.lightbox__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.badge-strip { display: flex; flex-wrap: wrap; gap: 24px; padding: 30px 0; border-top: 1px solid var(--ck-panel-border); }
.badge-item { display: flex; align-items: center; gap: 12px; color: var(--ck-grey-light); font-size: 0.95rem; }
.badge-item strong { color: var(--ck-white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ck-black-soft); border-top: 1px solid var(--ck-panel-border); padding: 40px 0 24px; margin-top: 60px; }
.site-footer a { color: var(--ck-grey-light); }
.site-footer a:hover { color: var(--ck-red); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; margin: 18px 0; font-size: 0.9rem; }
.footer-note { color: var(--ck-grey); font-size: 0.82rem; }

/* ---------- Forms ---------- */
.form-card {
    background: var(--ck-panel);
    border: 1px solid var(--ck-panel-border);
    border-radius: var(--radius);
    padding: 34px;
    max-width: 460px;
    margin: 60px auto;
}
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 0.88rem; color: var(--ck-grey-light); }
.form-control {
    width: 100%;
    padding: 11px 14px;
    background: var(--ck-black);
    border: 1px solid var(--ck-panel-border);
    border-radius: var(--radius);
    color: var(--ck-white);
    font-size: 0.95rem;
}
.form-control:focus { outline: none; border-color: var(--ck-red); }
.form-error { color: #ff6b73; font-size: 0.82rem; margin-top: 4px; }
.form-row { display: flex; gap: 14px; }
.form-row .form-group { flex: 1; }

/* Honeypot anti-spam field: kept in the DOM/tab order-free but moved off-screen
   rather than display:none, since some spam bots skip visually-hidden fields. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 24px; padding-top: 12px; }
.contact-info-item { display: flex; gap: 14px; align-items: flex-start; color: var(--ck-grey-light); font-size: 0.92rem; }
.contact-info-item strong { display: block; color: var(--ck-white); margin-bottom: 3px; }
.contact-info-item a { color: var(--ck-grey-light); }
.contact-info-item a:hover { color: var(--ck-red); }
@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.9rem; }
.alert-error { background: rgba(227, 6, 19, 0.12); border: 1px solid var(--ck-red); color: #ff9ba1; }
.alert-success { background: rgba(47, 191, 113, 0.12); border: 1px solid var(--ck-success); color: #7fe8ac; }

table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--ck-panel-border); text-align: left; font-size: 0.9rem; }
table.data-table th { color: var(--ck-grey); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.status-pending, .status-requested { background: rgba(227,163,6,0.15); color: var(--ck-warning); }
.status-confirmed, .status-issued, .status-in_progress { background: rgba(60,140,255,0.15); color: #6ba8ff; }
.status-completed, .status-paid, .status-approved, .status-accepted { background: rgba(47,191,113,0.15); color: var(--ck-success); }
.status-cancelled, .status-rejected, .status-refused, .status-overdue { background: rgba(227,6,19,0.15); color: #ff6b73; }

.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--ck-panel-border);
    background: transparent;
    color: var(--ck-white);
    cursor: pointer;
}
.mobile-nav-toggle svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 860px) {
    .mobile-nav-toggle { display: flex; }
    .nav {
        display: none;
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--ck-black);
        padding: 20px;
        overflow-y: auto;
        z-index: 100;
    }
    .nav.is-open { display: flex; }
    .nav a.nav-link { width: 100%; padding: 14px 4px; border-bottom: 1px solid var(--ck-panel-border); }
    .nav .btn { margin-top: 12px; width: 100%; }
    .hero h1 { font-size: 2.2rem; }
}

/* Tableaux : enveloppes en JS dans .table-scroll-wrapper (voir site.js)
   pour un defilement horizontal fiable sans faire deborder toute la page. */
.table-scroll-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }