@charset "UTF-8";
/* ---- tokens.css ---- */
/**
 * Taxi Lille Connect — Design tokens.
 * Single source of truth for color, type, spacing, radius, shadow, motion.
 * Consumed by every other stylesheet. Never hard-code these values elsewhere.
 */

:root {
  /* ---------- Color ---------- */
  --tlc-color-midnight: #07111F;
  --tlc-color-navy: #0B1726;
  --tlc-color-ink: #050A10;
  --tlc-color-ivory: #F6F2EA;
  --tlc-color-paper: #FBFAF7;
  --tlc-color-gold: #C6A15B;
  --tlc-color-gold-muted: #A98649;
  --tlc-color-slate: #747C85;
  --tlc-color-white: #FFFFFF;

  /* Derived roles */
  --tlc-color-text: #1C2530;            /* body text on light surfaces */
  --tlc-color-text-soft: #46505C;       /* secondary text on light surfaces */
  --tlc-color-text-inverse: #EFEAE0;    /* body text on dark surfaces */
  --tlc-color-text-inverse-soft: rgba(239, 234, 224, 0.72);
  /* Gold set as *text* on a light surface: --tlc-color-gold-muted tops out at
     3.0:1 on ivory, so body-size gold copy uses this darker role instead
     (5.5:1 on paper, 5.1:1 on ivory). Gold-muted stays the icon/hairline gold,
     where 3:1 is the bar; raw --tlc-color-gold stays the text gold on the dark
     surfaces, where it already measures 7.8:1. */
  --tlc-color-gold-text: #7F6230;
  /* Captions and form hints render at 13px, so this role has to clear 4.5:1
     on its own: the former #747C85 only reached 4.05:1 on paper. */
  --tlc-color-muted: #666E77;
  --tlc-color-line-light: rgba(11, 23, 38, 0.12);   /* hairlines on light */
  --tlc-color-line-dark: rgba(246, 242, 234, 0.14); /* hairlines on dark */
  --tlc-color-gold-line: rgba(198, 161, 91, 0.45);
  /* Gold is a 2.4:1 hairline on paper, so the ring role is the darkened gold
     (4.8:1 on paper, 5.0:1 on white). The dark surfaces re-point it in
     base.css, where raw gold already clears 3:1 comfortably. */
  --tlc-color-focus: #8A6B33;
  --tlc-color-success: #2E7D52;
  --tlc-color-error: #B3392E;

  /* ---------- Typography ---------- */
  --tlc-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --tlc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --tlc-text-display: clamp(2.75rem, 1.4rem + 5.2vw, 4.75rem);
  --tlc-text-h1: clamp(2.5rem, 1.3rem + 4.6vw, 4.25rem);
  --tlc-text-h2: clamp(1.9rem, 1.25rem + 2.4vw, 3rem);
  --tlc-text-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  --tlc-text-h4: 1.125rem;
  --tlc-text-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --tlc-text-body: 1rem;
  --tlc-text-small: 0.875rem;
  --tlc-text-xs: 0.8125rem;
  --tlc-text-eyebrow: 0.78rem;
  --tlc-text-button: 0.8125rem;

  --tlc-leading-tight: 1.08;
  --tlc-leading-heading: 1.15;
  --tlc-leading-body: 1.65;

  --tlc-tracking-wide: 0.16em;
  --tlc-tracking-wider: 0.22em;

  /* ---------- Spacing ---------- */
  --tlc-space-xs: 0.5rem;
  --tlc-space-sm: 1rem;
  --tlc-space-md: 1.5rem;
  --tlc-space-lg: 2.5rem;
  --tlc-space-xl: 4rem;
  --tlc-space-2xl: clamp(4.5rem, 3rem + 6vw, 7.5rem);

  /* Vertical rhythm of page sections */
  --tlc-section-pad: clamp(4rem, 2.5rem + 5vw, 6.75rem);
  --tlc-section-pad-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* ---------- Layout ---------- */
  --tlc-container: 1200px;
  --tlc-container-wide: 1360px;
  --tlc-container-narrow: 780px;
  --tlc-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --tlc-header-height: 76px;
  --tlc-actionbar-height: 53px;

  /* ---------- Shape & elevation ---------- */
  --tlc-radius-sm: 4px;
  --tlc-radius-md: 10px;
  --tlc-shadow-soft: 0 18px 45px -18px rgba(5, 10, 16, 0.35);
  --tlc-shadow-card: 0 10px 30px -12px rgba(5, 10, 16, 0.22);

  /* ---------- Motion ---------- */
  --tlc-transition: 0.25s cubic-bezier(0.33, 1, 0.68, 1);
  /* Exposed on its own because the FAQ panel has to delay a discrete
     visibility flip until the height animation has finished. */
  --tlc-duration-slow: 0.45s;
  --tlc-transition-slow: var(--tlc-duration-slow) cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---- base.css ---- */
/**
 * Taxi Lille Connect — Base layer.
 * Global resets, surfaces, layout primitives, accessibility helpers.
 */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The header is fixed, so anchor and focus scrolling has to stop short of it
     or the target lands underneath. */
  scroll-padding-top: calc(var(--tlc-header-height) + var(--tlc-space-sm));
}

body {
  margin: 0;
  background: var(--tlc-color-paper);
  color: var(--tlc-color-text);
  font-family: var(--tlc-font-body);
  font-size: var(--tlc-text-body);
  line-height: var(--tlc-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

/* <picture> is inline by default, which would reintroduce the descender gap
   under every photograph now that images are wrapped for WebP delivery. */
.tlc-picture {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tlc-transition), opacity var(--tlc-transition);
}

hr {
  border: 0;
  border-top: 1px solid var(--tlc-color-line-light);
  margin: var(--tlc-space-lg) 0;
}

::selection {
  background: rgba(198, 161, 91, 0.28);
  color: inherit;
}

/* ---------- Surfaces ---------- */

.tlc-surface-dark {
  background-color: var(--tlc-color-midnight);
  color: var(--tlc-color-text-inverse);
}

.tlc-surface-navy {
  background-color: var(--tlc-color-navy);
  color: var(--tlc-color-text-inverse);
}

.tlc-surface-ink {
  background-color: var(--tlc-color-ink);
  color: var(--tlc-color-text-inverse);
}

/* Once the ground is dark the light-surface roles invert: raw gold is both the
   brighter focus ring and the readable gold text (7.8:1 on midnight), while the
   darkened variants would sink into it. */
.tlc-surface-dark,
.tlc-surface-navy,
.tlc-surface-ink {
  --tlc-color-focus: var(--tlc-color-gold);
  --tlc-color-gold-text: var(--tlc-color-gold);
}

.tlc-surface-ivory {
  background-color: var(--tlc-color-ivory);
  color: var(--tlc-color-text);
}

.tlc-surface-paper {
  background-color: var(--tlc-color-paper);
  color: var(--tlc-color-text);
}

/* ---------- Layout primitives ---------- */

.tlc-container {
  width: 100%;
  max-width: var(--tlc-container);
  margin-inline: auto;
  padding-inline: var(--tlc-gutter);
}

.tlc-container--wide {
  max-width: var(--tlc-container-wide);
}

.tlc-container--narrow {
  max-width: var(--tlc-container-narrow);
}

.tlc-section {
  padding-block: var(--tlc-section-pad);
}

.tlc-section--sm {
  padding-block: var(--tlc-section-pad-sm);
}

/* ---------- Accessibility ---------- */

.tlc-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: var(--tlc-color-ink);
  color: var(--tlc-color-ivory);
  font-size: var(--tlc-text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0 0 var(--tlc-radius-sm) var(--tlc-radius-sm);
  transition: top 0.2s ease;
}

.tlc-skip-link:focus {
  top: 0;
  outline: 2px solid var(--tlc-color-gold);
  outline-offset: 2px;
}

.screen-reader-text,
.tlc-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible, consistent focus for keyboard users */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tlc-color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Overflow guard ---------- */

html,
body {
  overflow-x: clip;
}

/* ---- typography.css ---- */
/**
 * Taxi Lille Connect — Typography system.
 * Editorial serif (Cormorant Garamond) for display, refined sans (Inter) for utility.
 * Scale: Display / H1 / H2 / H3 / H4 / Lead / Body / Small / Eyebrow / Button.
 */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--tlc-space-sm);
  font-family: var(--tlc-font-display);
  font-weight: 600;
  line-height: var(--tlc-leading-heading);
  color: inherit;
}

h1, .tlc-h1 {
  font-size: var(--tlc-text-h1);
  line-height: var(--tlc-leading-tight);
  letter-spacing: -0.01em;
}

h2, .tlc-h2 {
  font-size: var(--tlc-text-h2);
  letter-spacing: -0.005em;
}

h3, .tlc-h3 {
  font-size: var(--tlc-text-h3);
}

h4, .tlc-h4 {
  font-family: var(--tlc-font-body);
  font-size: var(--tlc-text-h4);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tlc-display {
  font-family: var(--tlc-font-display);
  font-size: var(--tlc-text-display);
  font-weight: 600;
  line-height: var(--tlc-leading-tight);
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

.tlc-lead {
  font-size: var(--tlc-text-lead);
  line-height: 1.7;
}

.tlc-small,
small {
  font-size: var(--tlc-text-small);
}

/* ---------- Eyebrow label ---------- */

.tlc-eyebrow {
  display: inline-block;
  margin: 0 0 var(--tlc-space-sm);
  font-family: var(--tlc-font-body);
  font-size: var(--tlc-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tlc-tracking-wider);
  text-transform: uppercase;
  color: var(--tlc-color-gold);
}

.tlc-surface-ivory .tlc-eyebrow,
.tlc-surface-paper .tlc-eyebrow {
  color: var(--tlc-color-gold-text);
}

/* ---------- Heading accent rule ---------- */

.tlc-heading-rule {
  width: 56px;
  height: 1px;
  margin: var(--tlc-space-md) 0;
  border: 0;
  background: var(--tlc-color-gold);
  opacity: 0.8;
}

/* Muted paragraph on dark surfaces */
.tlc-surface-dark p,
.tlc-surface-navy p,
.tlc-surface-ink p {
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-surface-dark h1, .tlc-surface-dark h2, .tlc-surface-dark h3,
.tlc-surface-navy h1, .tlc-surface-navy h2, .tlc-surface-navy h3,
.tlc-surface-ink h1, .tlc-surface-ink h2, .tlc-surface-ink h3 {
  color: var(--tlc-color-ivory);
}

/* Text links inside copy */
.tlc-link {
  color: var(--tlc-color-gold-text);
  text-decoration: underline;
  text-decoration-color: var(--tlc-color-gold-line);
  text-underline-offset: 3px;
}

/* Hover firms up the rule rather than lightening the text, which used to drop
   the link to 2.3:1 on paper. */
.tlc-link:hover {
  text-decoration-color: currentColor;
}

/* Ordinals — "XIXe siècle", "1er novembre". The superscript characters U+1D49/U+02B3
   render identically but live only in Inter's latin-ext subset, so a single glyph
   pulled an extra 85 KB font file onto the page. Markup instead, with the usual
   zero line-height so the raised text does not stretch the line it sits on. */
sup,
sub {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: 0.25em; }

/* ---- header.css ---- */
/**
 * Taxi Lille Connect — Global header + mobile navigation.
 * Transparent over the hero, solid midnight surface once scrolled.
 * JS hooks: .tlc-header[data-scrolled], .tlc-nav-toggle[aria-expanded],
 *           body.tlc-menu-open.
 */

.tlc-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9000;
  height: var(--tlc-header-height);
  display: flex;
  align-items: center;
  color: var(--tlc-color-ivory);
  background: linear-gradient(to bottom, rgba(5, 10, 16, 0.65), rgba(5, 10, 16, 0));
  transition: background var(--tlc-transition), box-shadow var(--tlc-transition);
}

/* WordPress admin bar is itself fixed at the top for logged-in users —
   push our header (and the mobile panel) below it so the wordmark is
   never hidden. WP uses 32px, and 46px below 783px. */
body.admin-bar .tlc-header {
  top: 32px;
}

body.admin-bar .tlc-mobile-nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .tlc-header,
  body.admin-bar .tlc-mobile-nav {
    top: 46px;
  }
}

.tlc-header[data-scrolled="true"] {
  background: rgba(6, 14, 25, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(198, 161, 91, 0.22);
}

.tlc-header__inner {
  width: 100%;
  max-width: var(--tlc-container-wide);
  margin-inline: auto;
  padding-inline: var(--tlc-gutter);
  display: flex;
  align-items: center;
  gap: var(--tlc-space-lg);
}

/* ---------- Wordmark ---------- */

.tlc-wordmark {
  font-family: var(--tlc-font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tlc-color-ivory);
  white-space: nowrap;
}

.tlc-wordmark:hover {
  color: var(--tlc-color-gold);
}

.tlc-wordmark img {
  max-height: 44px;
  width: auto;
}

/* ---------- Primary navigation ---------- */

.tlc-nav {
  margin-left: auto;
}

.tlc-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tlc-nav a {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: var(--tlc-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(246, 242, 234, 0.86);
}

.tlc-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.15rem;
  height: 1px;
  background: var(--tlc-color-gold);
  transition: right var(--tlc-transition);
}

.tlc-nav a:hover,
.tlc-nav a:focus-visible {
  color: var(--tlc-color-white);
}

.tlc-nav a:hover::after,
.tlc-nav a:focus-visible::after,
.tlc-nav .current-menu-item > a::after,
.tlc-nav [aria-current="page"]::after {
  right: 0;
}

.tlc-nav .current-menu-item > a,
.tlc-nav [aria-current="page"] {
  color: var(--tlc-color-white);
}

/* ---------- Header actions ---------- */

.tlc-header__actions {
  display: flex;
  align-items: center;
  gap: var(--tlc-space-md);
}

.tlc-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tlc-color-ivory);
  white-space: nowrap;
}

.tlc-header__phone svg {
  width: 15px;
  height: 15px;
  color: var(--tlc-color-gold);
}

.tlc-header__phone:hover {
  color: var(--tlc-color-gold);
}

/* ---------- Mobile toggle ---------- */

.tlc-nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--tlc-color-ivory);
}

.tlc-nav-toggle__bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--tlc-transition), opacity var(--tlc-transition), top var(--tlc-transition);
}

/* The button's first child is the visually-hidden label,
   so the bars are children 2–4. */
.tlc-nav-toggle__bar:nth-child(2) { top: 16px; }
.tlc-nav-toggle__bar:nth-child(3) { top: 22px; }
.tlc-nav-toggle__bar:nth-child(4) { top: 28px; }

.tlc-nav-toggle[aria-expanded="true"] .tlc-nav-toggle__bar:nth-child(2) {
  top: 22px;
  transform: rotate(45deg);
}

.tlc-nav-toggle[aria-expanded="true"] .tlc-nav-toggle__bar:nth-child(3) {
  opacity: 0;
}

.tlc-nav-toggle[aria-expanded="true"] .tlc-nav-toggle__bar:nth-child(4) {
  top: 22px;
  transform: rotate(-45deg);
}

/* ---------- Mobile panel ---------- */

.tlc-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 8900;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--tlc-header-height) + var(--tlc-space-lg)) var(--tlc-gutter) var(--tlc-space-lg);
  background: rgba(5, 10, 16, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--tlc-color-ivory);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--tlc-transition), transform var(--tlc-transition), visibility 0s linear var(--tlc-transition);
}

body.tlc-menu-open .tlc-mobile-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--tlc-transition), transform var(--tlc-transition);
}

body.tlc-menu-open {
  overflow: hidden;
}

.tlc-mobile-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tlc-mobile-nav li + li {
  border-top: 1px solid var(--tlc-color-line-dark);
}

/* Scoped to the nav list so the footer action buttons keep
   their design-system styling. */
.tlc-mobile-nav nav a {
  display: block;
  padding: 0.95rem 0.25rem;
  font-family: var(--tlc-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--tlc-color-ivory);
}

.tlc-mobile-nav nav a:hover,
.tlc-mobile-nav nav [aria-current="page"] {
  color: var(--tlc-color-gold);
}

.tlc-mobile-nav__footer {
  display: grid;
  gap: var(--tlc-space-sm);
  padding-top: var(--tlc-space-md);
  border-top: 1px solid var(--tlc-color-line-dark);
}

.tlc-mobile-nav__footer .tlc-btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1080px) {
  .tlc-nav,
  .tlc-header__actions .tlc-btn {
    display: none;
  }

  .tlc-header__actions {
    margin-left: auto;
  }

  .tlc-nav-toggle {
    display: block;
    margin-left: 0;
  }
}

@media (min-width: 1081px) {
  .tlc-mobile-nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .tlc-wordmark {
    font-size: 1rem;
    letter-spacing: 0.11em;
  }

  /* Icon-only phone link; the label stays for screen readers */
  .tlc-header__phone span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tlc-header__phone {
    padding: 0.6rem;
  }

  .tlc-header__phone svg {
    width: 18px;
    height: 18px;
  }
}

/* ---- footer.css ---- */
/**
 * Taxi Lille Connect — Footer.
 */

.tlc-site-footer {
  background: var(--tlc-color-ink);
  color: var(--tlc-color-text-inverse);
  padding: var(--tlc-space-2xl) 0 0;
  font-size: var(--tlc-text-small);
}

.tlc-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--tlc-space-xl) var(--tlc-space-lg);
  padding-bottom: var(--tlc-space-xl);
}

.tlc-footer__brand .tlc-wordmark {
  display: inline-block;
  margin-bottom: var(--tlc-space-md);
  font-size: 1.15rem;
}

.tlc-footer__brand p {
  max-width: 34ch;
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-text-inverse-soft);
  line-height: 1.7;
}

.tlc-footer__title {
  margin: 0 0 var(--tlc-space-sm);
  font-family: var(--tlc-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tlc-tracking-wider);
  text-transform: uppercase;
  color: var(--tlc-color-gold);
}

.tlc-site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tlc-site-footer li {
  margin-bottom: 0.55rem;
}

.tlc-site-footer li a,
.tlc-footer__contact a {
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-site-footer li a:hover,
.tlc-footer__contact a:hover {
  color: var(--tlc-color-gold);
}

.tlc-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.tlc-footer__contact svg {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 0.2rem;
  color: var(--tlc-color-gold);
}

.tlc-footer__contact address {
  font-style: normal;
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-text-inverse-soft);
  line-height: 1.6;
}

/* ---------- Bottom bar ---------- */

.tlc-footer__bottom {
  border-top: 1px solid var(--tlc-color-line-dark);
  padding: var(--tlc-space-md) 0;
}

.tlc-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tlc-space-sm);
  font-size: 0.72rem;
  color: rgba(239, 234, 224, 0.5);
}

.tlc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tlc-space-md);
}

.tlc-footer__legal a {
  color: rgba(239, 234, 224, 0.6);
}

.tlc-footer__legal a:hover {
  color: var(--tlc-color-gold);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .tlc-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .tlc-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-lg);
  }

  .tlc-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- components.css ---- */
/**
 * Taxi Lille Connect — Components.
 * Buttons, hero, trust strip, services index, comfort, benefits,
 * destinations, booking steps, Google trust, FAQ, final CTA,
 * sticky mobile action bar.
 */

/* =========================================================
   Buttons
   ========================================================= */

.tlc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  font-family: var(--tlc-font-body);
  font-size: var(--tlc-text-button);
  font-weight: 600;
  letter-spacing: var(--tlc-tracking-wide);
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--tlc-radius-sm);
  cursor: pointer;
  transition: background var(--tlc-transition), color var(--tlc-transition),
              border-color var(--tlc-transition), transform var(--tlc-transition);
}

.tlc-btn:active {
  transform: translateY(1px);
}

.tlc-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Primary — champagne fill, ink text */
.tlc-btn--primary {
  background: var(--tlc-color-gold);
  border-color: var(--tlc-color-gold);
  color: var(--tlc-color-ink);
}

.tlc-btn--primary:hover,
.tlc-btn--primary:focus-visible {
  background: #D4B172;
  border-color: #D4B172;
  color: var(--tlc-color-ink);
}

/* Ghost on dark surfaces */
.tlc-btn--ghost {
  background: transparent;
  border-color: rgba(246, 242, 234, 0.38);
  color: var(--tlc-color-ivory);
}

.tlc-btn--ghost:hover,
.tlc-btn--ghost:focus-visible {
  border-color: var(--tlc-color-ivory);
  color: var(--tlc-color-white);
  background: rgba(246, 242, 234, 0.06);
}

/* Ghost on light surfaces */
.tlc-btn--ghost-dark {
  background: transparent;
  border-color: rgba(11, 23, 38, 0.35);
  color: var(--tlc-color-text);
}

.tlc-btn--ghost-dark:hover,
.tlc-btn--ghost-dark:focus-visible {
  border-color: var(--tlc-color-navy);
  background: rgba(11, 23, 38, 0.04);
  color: var(--tlc-color-navy);
}

/* Slim text-like button */
.tlc-btn--line {
  padding: 0.6rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--tlc-color-gold-line);
  border-radius: 0;
  color: inherit;
}

.tlc-btn--line:hover {
  border-bottom-color: var(--tlc-color-gold);
  color: var(--tlc-color-gold-muted);
}

/* =========================================================
   Hero
   ========================================================= */

.tlc-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94vh, 900px);
  padding: calc(var(--tlc-header-height) + var(--tlc-space-xl)) 0 var(--tlc-space-xl);
  background-color: var(--tlc-color-ink);
  color: var(--tlc-color-text-inverse);
  overflow: hidden;
}

.tlc-hero__media,
.tlc-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
}

.tlc-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 10, 16, 0.92) 0%, rgba(5, 10, 16, 0.72) 34%, rgba(5, 10, 16, 0.18) 66%, rgba(5, 10, 16, 0.42) 100%),
    linear-gradient(to top, rgba(5, 10, 16, 0.85), rgba(5, 10, 16, 0) 36%);
}

.tlc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.tlc-hero__content {
  max-width: 620px;
}

.tlc-hero h1 {
  margin-bottom: var(--tlc-space-md);
  color: var(--tlc-color-ivory);
}

.tlc-hero__text {
  max-width: 520px;
  margin-bottom: var(--tlc-space-lg);
  font-size: var(--tlc-text-lead);
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tlc-space-sm);
  margin-bottom: var(--tlc-space-lg);
}

.tlc-hero__availability {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #3FA46A;
  box-shadow: 0 0 0 3px rgba(63, 164, 106, 0.22);
}

/* =========================================================
   Trust strip
   ========================================================= */

.tlc-trust {
  padding: 0;
  background: var(--tlc-color-navy);
  color: var(--tlc-color-text-inverse);
  border-top: 1px solid rgba(198, 161, 91, 0.18);
}

.tlc-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.tlc-trust__item {
  display: flex;
  gap: var(--tlc-space-sm);
  align-items: flex-start;
  padding: var(--tlc-space-lg) var(--tlc-space-md);
}

.tlc-trust__item + .tlc-trust__item {
  border-left: 1px solid var(--tlc-color-line-dark);
}

.tlc-trust__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--tlc-color-gold);
  border: 1px solid var(--tlc-color-gold-line);
  border-radius: 50%;
}

.tlc-trust__icon svg {
  width: 17px;
  height: 17px;
}

.tlc-trust__item .tlc-trust__title {
  margin: 0 0 0.2rem;
  font-family: var(--tlc-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--tlc-color-gold);
}

.tlc-trust__item p {
  margin: 0;
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-text-inverse-soft);
  line-height: 1.5;
}

/* =========================================================
   Section heading block (shared editorial intro)
   ========================================================= */

.tlc-section-head {
  max-width: 420px;
}

.tlc-section-head--center {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.tlc-section-head--center .tlc-heading-rule {
  margin-inline: auto;
}

.tlc-section-head p {
  color: var(--tlc-color-text-soft);
  font-size: var(--tlc-text-small);
  line-height: 1.7;
}

.tlc-surface-dark .tlc-section-head p,
.tlc-surface-navy .tlc-section-head p,
.tlc-surface-ink .tlc-section-head p {
  color: var(--tlc-color-text-inverse-soft);
}

/* =========================================================
   Services index
   ========================================================= */

.tlc-services__layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--tlc-space-2xl);
  align-items: start;
}

.tlc-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--tlc-color-line-light);
  border-top: 1px solid var(--tlc-color-line-light);
}

.tlc-service {
  display: block;
  padding: 0;
  border-right: 1px solid var(--tlc-color-line-light);
  border-bottom: 1px solid var(--tlc-color-line-light);
  color: inherit;
  overflow: hidden;
  transition: background var(--tlc-transition);
}

/* Photograph sits flush at the top of the cell; the hairline grid still
   provides the structure, so the card needs no padding of its own. */
.tlc-service__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--tlc-transition-slow);
}

a.tlc-service:hover .tlc-service__img,
a.tlc-service:focus-visible .tlc-service__img {
  transform: scale(1.04);
}

.tlc-service__body {
  padding: var(--tlc-space-md);
}

a.tlc-service:hover,
a.tlc-service:focus-visible {
  background: rgba(198, 161, 91, 0.07);
}

.tlc-service h3 {
  margin: 0 0 0.35rem;
  font-family: var(--tlc-font-body);
  font-size: 0.98rem;
  font-weight: 600;
}

.tlc-service p {
  margin: 0;
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-text-soft);
  line-height: 1.55;
}

/* =========================================================
   Comfort / vehicle section
   ========================================================= */

.tlc-comfort__layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--tlc-space-2xl);
  align-items: center;
}

.tlc-comfort__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tlc-space-md);
}

.tlc-figure {
  margin: 0;
}

.tlc-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--tlc-radius-sm);
}

.tlc-figure figcaption {
  padding-top: 0.7rem;
  font-size: var(--tlc-text-xs);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--tlc-color-text-inverse-soft);
}

/* =========================================================
   Benefits band
   ========================================================= */

.tlc-benefits__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.tlc-benefit {
  padding: var(--tlc-space-md) var(--tlc-space-sm);
  text-align: center;
}

.tlc-benefit + .tlc-benefit {
  border-left: 1px solid var(--tlc-color-line-light);
}

.tlc-benefit__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.6rem;
  color: var(--tlc-color-gold-muted);
}

.tlc-benefit__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.1;
}

.tlc-benefit .tlc-benefit__title {
  margin: 0 0 0.25rem;
  font-family: var(--tlc-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tlc-color-text);
}

.tlc-benefit p {
  margin: 0;
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-text-soft);
  line-height: 1.5;
}

/* =========================================================
   Destinations
   ========================================================= */

.tlc-destinations__head {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--tlc-space-lg);
  align-items: end;
  margin-bottom: var(--tlc-space-lg);
}

.tlc-destinations__cta {
  justify-self: end;
}

.tlc-destinations__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--tlc-space-md);
}

.tlc-destination {
  position: relative;
  display: block;
  border-radius: var(--tlc-radius-sm);
  overflow: hidden;
  color: var(--tlc-color-ivory);
}

.tlc-destination img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--tlc-transition-slow), filter var(--tlc-transition-slow);
}

.tlc-destination::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The 3/4 card is only ~200px tall on a 360px phone, which puts the wordmark
     at ~65% of its height — above where the old 45% stop had already faded out,
     and straight over the lit station roof. */
  background: linear-gradient(to top,
              rgba(5, 10, 16, 0.9) 0%,
              rgba(5, 10, 16, 0.75) 22%,
              rgba(5, 10, 16, 0.05) 60%);
  transition: background var(--tlc-transition);
}

.tlc-destination:hover img,
.tlc-destination:focus-visible img {
  transform: scale(1.04);
}

.tlc-destination__label {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: var(--tlc-space-sm);
  font-family: var(--tlc-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.tlc-destination__label small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--tlc-color-gold);
}

/* =========================================================
   Booking steps
   ========================================================= */

.tlc-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tlc-space-lg);
  margin-top: var(--tlc-space-xl);
}

.tlc-step {
  position: relative;
  text-align: center;
  padding-inline: var(--tlc-space-sm);
}

.tlc-step__num {
  display: block;
  margin-bottom: var(--tlc-space-sm);
  font-family: var(--tlc-font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tlc-color-gold-muted);
}

.tlc-step__num::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 0.9rem auto 0;
  background: var(--tlc-color-gold-line);
}

.tlc-step h3 {
  margin: 0 0 0.4rem;
  font-family: var(--tlc-font-body);
  font-size: 1rem;
  font-weight: 600;
}

.tlc-step p {
  margin: 0;
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-soft);
}

/* Dotted connector between steps (desktop only) */
@media (min-width: 981px) {
  .tlc-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: calc(50% + 3rem);
    width: calc(100% - 6rem);
    border-top: 1px dashed rgba(169, 134, 73, 0.4);
  }
}

/* =========================================================
   Google trust + FAQ row
   ========================================================= */

.tlc-feedback__layout {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: var(--tlc-space-lg);
  align-items: start;
}

/* Dark card inside a light section — same gold-role inversion as the asides. */
.tlc-review-card {
  padding: var(--tlc-space-xl) var(--tlc-space-lg);
  --tlc-color-focus: var(--tlc-color-gold);
  --tlc-color-gold-text: var(--tlc-color-gold);
  background: var(--tlc-color-midnight);
  color: var(--tlc-color-text-inverse);
  border-radius: var(--tlc-radius-md);
  box-shadow: var(--tlc-shadow-soft);
}

.tlc-review-card h2 {
  color: var(--tlc-color-ivory);
}

.tlc-review-card p {
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-review-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tlc-space-sm);
  margin-top: var(--tlc-space-md);
}

/* ---------- FAQ accordion ---------- */

.tlc-faq h2 {
  margin-bottom: var(--tlc-space-md);
}

/* The home FAQ answers decision-level questions and hands the operational ones
   to /faq/, which owns them — this is the line that does the handing over. */
.tlc-faq__more {
  margin-top: 1.25rem;
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-muted);
}

.tlc-faq__list {
  border-top: 1px solid var(--tlc-color-line-light);
}

.tlc-faq__item {
  border-bottom: 1px solid var(--tlc-color-line-light);
}

.tlc-faq__heading {
  margin: 0;
}

.tlc-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tlc-space-sm);
  width: 100%;
  padding: 1.05rem 0.25rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--tlc-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tlc-color-text);
  transition: color var(--tlc-transition);
}

.tlc-faq__question:hover {
  color: var(--tlc-color-gold-text);
}

.tlc-faq__chevron {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--tlc-color-gold-muted);
  transition: transform var(--tlc-transition);
}

.tlc-faq__question[aria-expanded="true"] .tlc-faq__chevron {
  transform: rotate(180deg);
}

.tlc-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--tlc-transition-slow);
}

/* Clipping alone leaves the answer readable to screen readers while its button
   still reports aria-expanded="false". visibility:hidden takes it out of the
   accessibility tree for real; the delay holds it back until the height
   animation has finished collapsing, so the panel does not blank out mid-slide.
   Scoped through :has() on purpose — where :has() is unsupported the rule drops
   and the panel simply behaves as it did before. */
.tlc-faq__item:has(.tlc-faq__question[aria-expanded="false"]) .tlc-faq__answer {
  visibility: hidden;
  transition: max-height var(--tlc-transition-slow),
              visibility 0s linear var(--tlc-duration-slow);
}

.tlc-faq__answer-inner {
  padding: 0 0.25rem 1.2rem;
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-soft);
  max-width: 60ch;
}

/* =========================================================
   Final CTA
   ========================================================= */

.tlc-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--tlc-color-midnight);
  color: var(--tlc-color-text-inverse);
}

.tlc-cta__media,
.tlc-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tlc-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 17, 31, 0.88);
}

.tlc-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-inline: auto;
}

.tlc-cta p {
  margin-bottom: var(--tlc-space-lg);
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tlc-space-sm);
}

/* =========================================================
   Sticky mobile action bar
   ========================================================= */

.tlc-actionbar {
  position: fixed;
  z-index: 8500;
  inset: auto 0 0 0;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(5, 10, 16, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(198, 161, 91, 0.28);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(0);
  transition: transform var(--tlc-transition);
}

.tlc-actionbar[data-hidden="true"] {
  transform: translateY(110%);
}

.tlc-actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 52px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tlc-color-ivory);
}

.tlc-actionbar a + a {
  border-left: 1px solid var(--tlc-color-line-dark);
}

.tlc-actionbar a svg {
  width: 15px;
  height: 15px;
  color: var(--tlc-color-gold);
}

.tlc-actionbar__reserve {
  background: var(--tlc-color-gold);
  color: var(--tlc-color-ink) !important;
}

.tlc-actionbar__reserve svg {
  color: var(--tlc-color-ink) !important;
}

@media (max-width: 980px) {
  .tlc-actionbar {
    display: grid;
  }

  /* Chrome parks a focused element flush with the viewport bottom, i.e. under
     the bar. Reserve the bar's height so the field stays visible. */
  html {
    scroll-padding-bottom: calc(var(--tlc-actionbar-height)
                                + env(safe-area-inset-bottom, 0px)
                                + var(--tlc-space-md));
  }

  /* Keep footer content reachable above the fixed bar */
  body.tlc-has-actionbar .tlc-site-footer {
    padding-bottom: calc(var(--tlc-space-xl) + 60px);
  }
}

/* =========================================================
   Fare estimator — /tarifs-taxi-lille/
   Applies the prefectoral bareme published directly above it.
   Reports a ceiling, never a quote: the arrete fixes maxima.
   ========================================================= */
.tlc-est {
  margin: var(--tlc-space-6, 2rem) 0;
  padding: var(--tlc-space-5, 1.5rem);
  border: 1px solid var(--tlc-color-border, rgba(198, 161, 91, 0.28));
  border-radius: 6px;
  background: var(--tlc-color-surface, rgba(255, 255, 255, 0.03));
}

.tlc-est__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tlc-space-4, 1rem);
}

.tlc-est__field {
  flex: 1 1 14rem;
  min-width: 0;
}

.tlc-est__field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tlc-est__unit {
  display: flex;
  align-items: stretch;
}

.tlc-est__unit input {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 4px 0 0 4px;
}

/* The unit sits flush against the input so the pair reads as one control. */
.tlc-est__unit span {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--tlc-color-border, rgba(198, 161, 91, 0.28));
  border-left: 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.9375rem;
  opacity: 0.75;
}

.tlc-est__field select,
.tlc-est__unit input {
  width: 100%;
}

.tlc-est__out[data-state="empty"] {
  display: none;
}

.tlc-est__out {
  margin: var(--tlc-space-4, 1rem) 0 0;
  padding-top: var(--tlc-space-4, 1rem);
  border-top: 1px solid var(--tlc-color-border, rgba(198, 161, 91, 0.2));
}

.tlc-est__figure {
  display: block;
  font-family: var(--tlc-font-display, "Cormorant Garamond"), Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.15;
  color: var(--tlc-color-gold-text, #C6A15B);
}

.tlc-est__detail {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  opacity: 0.85;
}

/* The caveat is not decoration — it is the difference between a ceiling and a
   quote, so it stays legible rather than shrinking into fine print. */
.tlc-est__caveat {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  opacity: 0.8;
}

/* ---- forms.css ---- */
/**
 * Taxi Lille Connect — Forms.
 * Reservation request form + generic form fields. Accessible states.
 */

.tlc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tlc-space-md) var(--tlc-space-md);
}

.tlc-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tlc-form__field--full {
  grid-column: 1 / -1;
}

.tlc-form label {
  font-size: var(--tlc-text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tlc-color-text-soft);
}

.tlc-form .tlc-required {
  color: var(--tlc-color-gold-text);
}

/* Email became optional on 2026-09-26. Marking it so explicitly is worth more
   than leaving the field unmarked: a blank field with no note reads as an
   oversight, whereas "(facultatif)" tells the visitor they may skip it — which
   is the whole point of the change. Muted and smaller so it recedes next to the
   gold asterisks on the fields that are genuinely required. */
.tlc-form .tlc-form__optional {
  color: var(--tlc-color-text-muted, #8A93A0);
  font-weight: 400;
  font-size: 0.875em;
}

.tlc-form input[type="text"],
.tlc-form input[type="tel"],
.tlc-form input[type="email"],
.tlc-form input[type="date"],
.tlc-form input[type="time"],
.tlc-form input[type="number"],
.tlc-form select,
.tlc-form textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: var(--tlc-font-body);
  font-size: var(--tlc-text-body);
  color: var(--tlc-color-text);
  background: var(--tlc-color-white);
  border: 1px solid rgba(11, 23, 38, 0.2);
  border-radius: var(--tlc-radius-sm);
  transition: border-color var(--tlc-transition), box-shadow var(--tlc-transition);
}

/* Pointer focus keeps the quiet gold treatment. */
.tlc-form input:focus,
.tlc-form select:focus,
.tlc-form textarea:focus {
  outline: none;
  border-color: var(--tlc-color-gold);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.2);
}

/* Keyboard focus gets a real ring: the border swap measures 1.6:1 against the
   unfocused border and the halo 1.2:1 against the page, and the checkboxes have
   no border to swap at all, so neither reads as a focus indicator. This rule
   must repeat the .tlc-form specificity to beat the outline:none above — the
   :where() ring in base.css carries none. */
.tlc-form input:focus-visible,
.tlc-form select:focus-visible,
.tlc-form textarea:focus-visible {
  outline: 2px solid var(--tlc-color-focus);
  outline-offset: 2px;
}

.tlc-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Checkbox / radio rows */
.tlc-form__check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.65rem;
}

.tlc-form__check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--tlc-color-gold-muted);
}

.tlc-form__check label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-soft);
}

.tlc-form__hint {
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-muted);
}

/* ---------- Validation states ---------- */

.tlc-form__field--error input,
.tlc-form__field--error select,
.tlc-form__field--error textarea {
  border-color: var(--tlc-color-error);
}

.tlc-form__error {
  font-size: var(--tlc-text-xs);
  font-weight: 500;
  color: var(--tlc-color-error);
}

.tlc-form-notice {
  grid-column: 1 / -1;
  padding: var(--tlc-space-sm) var(--tlc-space-md);
  border-radius: var(--tlc-radius-sm);
  font-size: var(--tlc-text-small);
}

.tlc-form-notice--error {
  background: rgba(179, 57, 46, 0.08);
  border: 1px solid rgba(179, 57, 46, 0.35);
  color: #8C2B22;
}

.tlc-form-notice--success {
  background: rgba(46, 125, 82, 0.08);
  border: 1px solid rgba(46, 125, 82, 0.35);
  color: #21593C;
}

.tlc-form-notice ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

/* Honeypot — visually removed, still in DOM for bots */
.tlc-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Responsive ---------- */

@media (max-width: 700px) {
  .tlc-form {
    grid-template-columns: 1fr;
  }
}

/* ---- pages.css ---- */
/**
 * Taxi Lille Connect — Interior-page components (phase 2).
 * Page hero, breadcrumbs, article layout with aside card, practical
 * checklist, related links, hub cards, legal prose, 404, blog defaults.
 */

/* =========================================================
   Page hero (compact dark opener for every interior page)
   ========================================================= */

.tlc-page-hero {
  position: relative;
  padding: calc(var(--tlc-header-height) + var(--tlc-space-xl)) 0 var(--tlc-space-xl);
  background:
    radial-gradient(120% 130% at 85% -20%, rgba(198, 161, 91, 0.12), transparent 55%),
    linear-gradient(160deg, var(--tlc-color-navy) 0%, var(--tlc-color-midnight) 55%, var(--tlc-color-ink) 100%);
  color: var(--tlc-color-text-inverse);
  border-bottom: 1px solid rgba(198, 161, 91, 0.16);
}

/* Photo-backed variant: the same gradient is layered over the image so
   the breadcrumb, H1 and lead stay legible whatever the photo does. */
.tlc-page-hero--photo {
  background-size: cover;
  background-position: center;
}

.tlc-page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(5, 10, 16, 0.94) 0%, rgba(5, 10, 16, 0.82) 45%, rgba(5, 10, 16, 0.55) 100%),
    linear-gradient(to top, rgba(5, 10, 16, 0.9), rgba(5, 10, 16, 0.2) 60%);
}

.tlc-page-hero--photo > * {
  position: relative;
  z-index: 2;
}

.tlc-page-hero h1 {
  max-width: 18ch;
  margin-bottom: var(--tlc-space-sm);
  color: var(--tlc-color-ivory);
}

.tlc-page-hero__lead {
  max-width: 58ch;
  font-size: var(--tlc-text-lead);
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tlc-space-sm);
  margin-top: var(--tlc-space-lg);
}

/* ---------- Breadcrumbs ---------- */

.tlc-breadcrumb {
  margin-bottom: var(--tlc-space-md);
  font-size: var(--tlc-text-xs);
  letter-spacing: 0.04em;
}

.tlc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tlc-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-breadcrumb li + li::before {
  content: "›";
  color: var(--tlc-color-gold);
  opacity: 0.7;
}

.tlc-breadcrumb a {
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-breadcrumb a:hover {
  color: var(--tlc-color-gold);
}

.tlc-breadcrumb [aria-current="page"] {
  color: var(--tlc-color-ivory);
}

/* =========================================================
   Article layout: prose + sticky aside card
   ========================================================= */

.tlc-article {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: var(--tlc-space-2xl);
  align-items: start;
}

.tlc-prose {
  max-width: 68ch;
}

.tlc-prose h2 {
  font-size: var(--tlc-text-h3);
  margin: var(--tlc-space-xl) 0 var(--tlc-space-sm);
}

.tlc-prose h2:first-child {
  margin-top: 0;
}

.tlc-prose h3 {
  font-family: var(--tlc-font-body);
  font-size: 1.02rem;
  font-weight: 600;
  margin: var(--tlc-space-lg) 0 0.5rem;
}

.tlc-prose p,
.tlc-prose li {
  color: var(--tlc-color-text-soft);
  line-height: 1.75;
}

.tlc-prose ul {
  padding-left: 1.1rem;
  margin: 0 0 1.1em;
}

.tlc-prose li {
  margin-bottom: 0.45rem;
}

.tlc-prose li::marker {
  color: var(--tlc-color-gold-muted);
}

.tlc-prose a:not(.tlc-btn) {
  color: var(--tlc-color-gold-text);
  text-decoration: underline;
  text-decoration-color: var(--tlc-color-gold-line);
  text-underline-offset: 3px;
}

/* Hover firms up the rule rather than lightening the text, which used to drop
   the link to 2.3:1 on paper. */
.tlc-prose a:not(.tlc-btn):hover {
  text-decoration-color: currentColor;
}

/* ---------- Aside contact/booking card ---------- */

/* A dark card inside a light section, so it has to invert the gold roles the
   way the .tlc-surface-* classes do — its eyebrow sits on midnight, not paper. */
.tlc-aside-card {
  position: sticky;
  top: calc(var(--tlc-header-height) + var(--tlc-space-md));
  padding: var(--tlc-space-lg);
  --tlc-color-focus: var(--tlc-color-gold);
  --tlc-color-gold-text: var(--tlc-color-gold);
  background: var(--tlc-color-midnight);
  color: var(--tlc-color-text-inverse);
  border-radius: var(--tlc-radius-md);
  box-shadow: var(--tlc-shadow-soft);
}

.tlc-aside-card .tlc-eyebrow {
  margin-bottom: 0.6rem;
}

.tlc-aside-card__title {
  margin: 0 0 0.5rem;
  font-family: var(--tlc-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tlc-color-ivory);
}

.tlc-aside-card p {
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-inverse-soft);
}

.tlc-aside-card__actions {
  display: grid;
  gap: var(--tlc-space-xs);
  margin-top: var(--tlc-space-md);
}

.tlc-aside-card__actions .tlc-btn {
  width: 100%;
}

.tlc-aside-card__note {
  margin-top: var(--tlc-space-sm);
  font-size: var(--tlc-text-xs);
  color: rgba(239, 234, 224, 0.55);
}

/* =========================================================
   Practical checklist (« Bon à savoir »)
   ========================================================= */

.tlc-practical {
  border-top: 1px solid var(--tlc-color-line-light);
}

.tlc-practical__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--tlc-space-lg);
  margin-top: var(--tlc-space-lg);
}

.tlc-practical__item {
  display: flex;
  gap: var(--tlc-space-sm);
  align-items: flex-start;
}

.tlc-practical__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--tlc-color-gold-muted);
  border: 1px solid var(--tlc-color-gold-line);
  border-radius: 50%;
}

.tlc-practical__icon svg {
  width: 17px;
  height: 17px;
}

.tlc-practical__item h3 {
  margin: 0 0 0.25rem;
  font-family: var(--tlc-font-body);
  font-size: 0.95rem;
  font-weight: 600;
}

.tlc-practical__item p {
  margin: 0;
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-soft);
  line-height: 1.6;
}

/* ---------- Inline article figure ----------
   A real <img> inside the prose: indexable, alt-bearing, and surrounded
   by the topical text that image search actually reads. */

.tlc-prose figure {
  margin: var(--tlc-space-xl) 0;
}

.tlc-prose figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tlc-radius-sm);
}

.tlc-prose figcaption {
  padding-top: 0.7rem;
  font-size: var(--tlc-text-xs);
  letter-spacing: 0.03em;
  color: var(--tlc-color-muted);
}

/* The same treatment outside the prose column, so the pages built from
   their own sections (contact, FAQ, réservation, avis) can carry an
   indexable photograph too. */
.tlc-inline-figure {
  margin: var(--tlc-space-xl) 0 0;
}

/* On /faq/ the figure opens the section and the question groups follow it
   directly, so it needs the trailing rhythm the prose version gets from the
   paragraph after it. */
.tlc-container > .tlc-inline-figure {
  margin-bottom: var(--tlc-space-xl);
}

.tlc-inline-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tlc-radius-sm);
}

.tlc-inline-figure figcaption {
  padding-top: 0.7rem;
  font-size: var(--tlc-text-xs);
  letter-spacing: 0.03em;
  color: var(--tlc-color-muted);
}

/* ---------- Regulated tariff table ----------
   Wide content must scroll inside its own container rather than pushing the
   page sideways; the wrapper is what carries the overflow. */

.tlc-table-wrap {
  margin: var(--tlc-space-lg) 0;
  overflow-x: auto;
  border: 1px solid var(--tlc-color-line-light);
  border-radius: var(--tlc-radius-sm);
}

.tlc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tlc-text-small);
}

.tlc-table caption {
  padding: var(--tlc-space-sm) var(--tlc-space-md);
  font-size: var(--tlc-text-xs);
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--tlc-color-muted);
  border-bottom: 1px solid var(--tlc-color-line-light);
}

.tlc-table th,
.tlc-table td {
  padding: 0.7rem var(--tlc-space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tlc-color-line-light);
}

.tlc-table thead th {
  font-family: var(--tlc-font-body);
  font-size: var(--tlc-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tlc-color-muted);
  background: var(--tlc-color-surface-ivory, #F6F2EA);
}

/* The amount column reads as a figure list, so keep it from wrapping. */
.tlc-table td:last-child,
.tlc-table th:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tlc-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Small print under a table or a figure. */
.tlc-note {
  margin-top: var(--tlc-space-sm);
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-muted);
}

/* ---------- Hub card photograph ---------- */

.tlc-hub-card {
  padding: 0;
}

.tlc-hub-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--tlc-transition-slow);
}

.tlc-hub-card:hover .tlc-hub-card__img,
.tlc-hub-card:focus-visible .tlc-hub-card__img {
  transform: scale(1.04);
}

.tlc-hub-card__body {
  padding: var(--tlc-space-lg);
}

.tlc-hub-card {
  overflow: hidden;
}

/* =========================================================
   Related links
   ========================================================= */

.tlc-related {
  border-top: 1px solid var(--tlc-color-line-light);
  padding-top: var(--tlc-space-lg);
  margin-top: var(--tlc-space-xl);
}

.tlc-related__title {
  margin: 0 0 var(--tlc-space-sm);
  font-family: var(--tlc-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tlc-tracking-wider);
  text-transform: uppercase;
  color: var(--tlc-color-gold-text);
}

.tlc-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tlc-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tlc-related a {
  display: inline-block;
  padding: 0.55rem 1rem;
  font-size: var(--tlc-text-xs);
  font-weight: 500;
  color: var(--tlc-color-text-soft);
  border: 1px solid var(--tlc-color-line-light);
  border-radius: 999px;
  transition: border-color var(--tlc-transition), color var(--tlc-transition), background var(--tlc-transition);
}

.tlc-related a:hover,
.tlc-related a:focus-visible {
  border-color: var(--tlc-color-gold);
  color: var(--tlc-color-gold-text);
  background: rgba(198, 161, 91, 0.06);
}

/* =========================================================
   Hub cards (services/ and destinations/ index pages)
   ========================================================= */

.tlc-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--tlc-color-line-light);
  border-left: 1px solid var(--tlc-color-line-light);
  margin-top: var(--tlc-space-lg);
}

.tlc-hub-card {
  display: block;
  padding: var(--tlc-space-lg);
  border-right: 1px solid var(--tlc-color-line-light);
  border-bottom: 1px solid var(--tlc-color-line-light);
  color: inherit;
  transition: background var(--tlc-transition);
}

.tlc-hub-card:hover,
.tlc-hub-card:focus-visible {
  background: rgba(198, 161, 91, 0.07);
}

.tlc-hub-card__icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--tlc-space-sm);
  color: var(--tlc-color-gold-muted);
}

.tlc-hub-card__icon svg {
  width: 26px;
  height: 26px;
}

.tlc-hub-card h2,
.tlc-hub-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--tlc-font-body);
  font-size: 1.05rem;
  font-weight: 600;
}

.tlc-hub-card p {
  margin: 0 0 0.7rem;
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-soft);
  line-height: 1.6;
}

.tlc-hub-card__more {
  font-size: var(--tlc-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tlc-color-gold-text);
}

.tlc-hub-group + .tlc-hub-group {
  margin-top: var(--tlc-space-2xl);
}

.tlc-hub-group > h2 {
  font-size: var(--tlc-text-h3);
}

/* =========================================================
   Contact page
   ========================================================= */

.tlc-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tlc-space-md);
  margin-top: var(--tlc-space-lg);
}

/* min-width:0 because the grid-item default of auto pins each 1fr track to the
   mailto button's 355px min-content and shears the cards off the viewport. */
.tlc-contact-card {
  min-width: 0;
  padding: var(--tlc-space-lg);
  border: 1px solid var(--tlc-color-line-light);
  border-radius: var(--tlc-radius-md);
  background: var(--tlc-color-white);
  text-align: center;
}

.tlc-contact-card .tlc-practical__icon {
  margin-inline: auto;
  margin-bottom: var(--tlc-space-sm);
}

/* The e-mail address is one unbreakable token; let it wrap rather than push. */
.tlc-contact-card .tlc-btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.tlc-contact-card h2 {
  margin: 0 0 0.35rem;
  font-family: var(--tlc-font-body);
  font-size: 1rem;
  font-weight: 600;
}

.tlc-contact-card p {
  margin: 0 0 var(--tlc-space-sm);
  font-size: var(--tlc-text-small);
  color: var(--tlc-color-text-soft);
}

/* =========================================================
   Legal pages — narrow centered prose
   ========================================================= */

.tlc-legal .tlc-prose {
  margin-inline: auto;
}

.tlc-legal .tlc-todo {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: rgba(198, 161, 91, 0.14);
  border: 1px dashed var(--tlc-color-gold-muted);
  border-radius: var(--tlc-radius-sm);
  font-size: 0.85em;
  color: var(--tlc-color-gold-text);
}

/* =========================================================
   404
   ========================================================= */

.tlc-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(100% 120% at 50% -30%, rgba(198, 161, 91, 0.1), transparent 60%),
    linear-gradient(170deg, var(--tlc-color-navy), var(--tlc-color-ink));
  color: var(--tlc-color-text-inverse);
  padding: calc(var(--tlc-header-height) + var(--tlc-space-xl)) 0 var(--tlc-space-2xl);
}

.tlc-404__code {
  display: block;
  font-family: var(--tlc-font-display);
  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 1;
  color: var(--tlc-color-gold);
  margin-bottom: var(--tlc-space-sm);
}

.tlc-404 h1 {
  color: var(--tlc-color-ivory);
}

.tlc-404 p {
  max-width: 46ch;
  margin-inline: auto;
}

.tlc-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tlc-space-sm);
  margin-top: var(--tlc-space-lg);
}

/* =========================================================
   Blog defaults (archives, single, search) — restrained
   ========================================================= */

body.blog #main-content,
body.archive #main-content,
body.search #main-content,
body.single-post #main-content {
  padding-top: calc(var(--tlc-header-height) + var(--tlc-space-lg));
}

body.single-post .et_post_meta_wrapper h1,
body.blog article h2,
body.archive article h2 {
  font-family: var(--tlc-font-display);
}

/* =========================================================
   Divi bridge for interior layouts
   (rows tagged tlc-grid-row become grids — see divi.css)
   ========================================================= */

/* Stretch, not start: sticky needs the aside's grid area to be as tall as the
   row. Divi then nests the card inside .et_pb_module > .et_pb_code_inner, and
   that inner div is the card's containing block, so the whole chain has to
   grow with it or the card still pins for barely a hundred pixels. */
.et_pb_row.tlc-row-article {
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: var(--tlc-space-2xl);
  align-items: stretch;
}

.tlc-row-article > .et_pb_column:last-child,
.tlc-row-article > .et_pb_column:last-child .et_pb_module,
.tlc-row-article > .et_pb_column:last-child .et_pb_code_inner {
  height: 100%;
}

@media (max-width: 1080px) {
  .et_pb_row.tlc-row-article {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-xl);
  }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1080px) {
  .tlc-article {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-xl);
  }

  .tlc-aside-card {
    position: static;
    max-width: 460px;
  }

  .tlc-practical__grid,
  .tlc-contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .tlc-hub-grid {
    grid-template-columns: 1fr;
  }

  .tlc-practical__grid,
  .tlc-contact-grid {
    grid-template-columns: 1fr;
  }

  .tlc-page-hero__actions .tlc-btn {
    flex: 1 1 auto;
  }
}

/* ---- divi.css ---- */
/**
 * Taxi Lille Connect — Divi integration layer.
 *
 * The homepage layout (divi/homepage-layout.json) assigns `tlc-*` classes
 * to Divi sections/rows/modules via their "CSS Class" fields. This file
 * bridges Divi's generated markup to the design system so what the owner
 * edits in the Visual Builder renders exactly like the approved design.
 *
 * The Divi parent theme is never modified.
 */

/* ---------- Replace Divi's default chrome ---------- */

/* The child theme renders its own header/footer (inc/template-parts.php).
   Divi's defaults are hidden rather than dequeued so the parent theme
   stays untouched and Theme Builder can take over later if desired. */
body.tlc-theme #main-header,
body.tlc-theme #top-header,
body.tlc-theme #main-footer {
  display: none;
}

/* Divi JS pads the page for its own fixed header — neutralise it,
   the hero manages its own offset under the custom fixed header. */
body.tlc-theme #page-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---------- Global Divi resets ---------- */

/* Give our tokens authority over Divi body typography */
#page-container,
.et_pb_section {
  font-family: var(--tlc-font-body);
}

/* Sections tagged with the design system drop Divi's default padding
   in favour of the token rhythm */
.et_pb_section.tlc-section {
  padding: var(--tlc-section-pad) 0;
}

.et_pb_section.tlc-section--sm {
  padding: var(--tlc-section-pad-sm) 0;
}

.et_pb_section.tlc-section--flush {
  padding: 0;
}

/* Rows tagged tlc-row become full design-system containers */
.et_pb_row.tlc-row {
  width: calc(100% - 2 * var(--tlc-gutter));
  max-width: var(--tlc-container);
  padding: 0;
}

.et_pb_row.tlc-row--wide {
  max-width: var(--tlc-container-wide);
}

.et_pb_row.tlc-row--narrow {
  max-width: var(--tlc-container-narrow);
}

/* Kill Divi's default module bottom margin inside tagged rows;
   spacing comes from the components */
.tlc-row .et_pb_module {
  margin-bottom: 0;
}

/* ---------- Surfaces on Divi sections ---------- */

.et_pb_section.tlc-surface-dark { background-color: var(--tlc-color-midnight); }
.et_pb_section.tlc-surface-navy { background-color: var(--tlc-color-navy); }
.et_pb_section.tlc-surface-ink { background-color: var(--tlc-color-ink); }
.et_pb_section.tlc-surface-ivory { background-color: var(--tlc-color-ivory); }
.et_pb_section.tlc-surface-paper { background-color: var(--tlc-color-paper); }

.et_pb_section.tlc-surface-dark,
.et_pb_section.tlc-surface-navy,
.et_pb_section.tlc-surface-ink {
  color: var(--tlc-color-text-inverse);
}

/* ---------- Divi text modules ---------- */

.tlc-row .et_pb_text {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.tlc-row .et_pb_text h1,
.tlc-row .et_pb_text h2,
.tlc-row .et_pb_text h3 {
  font-family: var(--tlc-font-display);
}

/* ---------- Divi buttons → design-system buttons ---------- */

.et_pb_button.tlc-btn,
.et_pb_button_module_wrapper .et_pb_button.tlc-btn {
  padding: 0.85rem 1.7rem !important;
  font-family: var(--tlc-font-body) !important;
  font-size: var(--tlc-text-button) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tlc-tracking-wide) !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  border-radius: var(--tlc-radius-sm) !important;
  transition: background var(--tlc-transition), color var(--tlc-transition), border-color var(--tlc-transition);
}

/* Remove Divi's injected arrow pseudo-element */
.et_pb_button.tlc-btn::after,
.et_pb_button.tlc-btn::before {
  display: none !important;
}

.et_pb_button.tlc-btn--primary {
  background: var(--tlc-color-gold) !important;
  border: 1px solid var(--tlc-color-gold) !important;
  color: var(--tlc-color-ink) !important;
}

.et_pb_button.tlc-btn--primary:hover {
  background: #D4B172 !important;
  border-color: #D4B172 !important;
}

.et_pb_button.tlc-btn--ghost {
  background: transparent !important;
  border: 1px solid rgba(246, 242, 234, 0.38) !important;
  color: var(--tlc-color-ivory) !important;
}

.et_pb_button.tlc-btn--ghost:hover {
  border-color: var(--tlc-color-ivory) !important;
  background: rgba(246, 242, 234, 0.06) !important;
}

.et_pb_button.tlc-btn--ghost-dark {
  background: transparent !important;
  border: 1px solid rgba(11, 23, 38, 0.35) !important;
  color: var(--tlc-color-text) !important;
}

.et_pb_button.tlc-btn--ghost-dark:hover {
  border-color: var(--tlc-color-navy) !important;
  background: rgba(11, 23, 38, 0.04) !important;
}

/* Divi wraps buttons; keep them inline for action groups */
.tlc-actions .et_pb_button_module_wrapper {
  display: inline-block;
  margin-right: var(--tlc-space-sm);
  margin-bottom: var(--tlc-space-sm);
}

/* ---------- Divi blurbs → services / benefits ---------- */

.et_pb_blurb.tlc-service .et_pb_main_blurb_image {
  margin-bottom: var(--tlc-space-sm);
}

.et_pb_blurb.tlc-service .et_pb_blurb_container,
.et_pb_blurb.tlc-benefit .et_pb_blurb_container {
  padding: 0;
}

.et_pb_blurb.tlc-service h4,
.et_pb_blurb.tlc-benefit h4 {
  font-family: var(--tlc-font-body);
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.et_pb_blurb.tlc-service .et_pb_blurb_description,
.et_pb_blurb.tlc-benefit .et_pb_blurb_description {
  font-size: var(--tlc-text-xs);
  color: var(--tlc-color-text-soft);
  line-height: 1.55;
}

/* ---------- Divi images ---------- */

.tlc-row .et_pb_image {
  text-align: center;
}

.tlc-row .et_pb_image img {
  border-radius: var(--tlc-radius-sm);
}

/* ---------- Section surfaces & spacing at Divi specificity ----------
   Divi ships `.et_pb_section { background-color: #fff }` and emits
   per-section padding rules like `.et_pb_section_3 { padding: 0 }`.
   Both are single-class selectors, so component styles written as
   `.tlc-hero` can lose depending on stylesheet order. Re-declaring the
   load-bearing properties as `.et_pb_section.tlc-*` (two classes) makes
   the design system win deterministically. */

.et_pb_section.tlc-hero {
  min-height: min(94vh, 900px);
  padding: calc(var(--tlc-header-height) + var(--tlc-space-xl)) 0 var(--tlc-space-xl);
  background-color: var(--tlc-color-ink);
  color: var(--tlc-color-text-inverse);
}

.et_pb_section.tlc-trust {
  padding: 0;
  background-color: var(--tlc-color-navy);
  color: var(--tlc-color-text-inverse);
}

.et_pb_section.tlc-cta {
  padding: var(--tlc-section-pad) 0;
  background-color: var(--tlc-color-midnight);
  color: var(--tlc-color-text-inverse);
}

.et_pb_section.tlc-page-hero {
  padding: calc(var(--tlc-header-height) + var(--tlc-space-xl)) 0 var(--tlc-space-xl);
  background-color: var(--tlc-color-midnight);
  color: var(--tlc-color-text-inverse);
}

.et_pb_section.tlc-404 {
  background-color: var(--tlc-color-navy);
  color: var(--tlc-color-text-inverse);
}

/* Divi resets heading colours per module; keep inverse text on dark
   sections regardless of which module renders it. */
.et_pb_section.tlc-hero h1,
.et_pb_section.tlc-hero h2,
.et_pb_section.tlc-cta h2,
.et_pb_section.tlc-page-hero h1,
.et_pb_section.tlc-surface-dark h2,
.et_pb_section.tlc-surface-navy h2,
.et_pb_section.tlc-surface-ink h2 {
  color: var(--tlc-color-ivory);
}

.et_pb_section.tlc-hero .et_pb_text,
.et_pb_section.tlc-trust .et_pb_text,
.et_pb_section.tlc-cta .et_pb_text,
.et_pb_section.tlc-page-hero .et_pb_text,
.et_pb_section.tlc-surface-dark .et_pb_text,
.et_pb_section.tlc-surface-navy .et_pb_text,
.et_pb_section.tlc-surface-ink .et_pb_text {
  color: var(--tlc-color-text-inverse);
}

/* ---------- Structural bridge for the homepage layout ---------- */

/* Hero as a Divi section: the vehicle photo is the section background
   (editable in the Visual Builder); the cinematic overlay is recreated
   on ::before so no extra markup is needed. */
.et_pb_section.tlc-hero {
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: 68% center;
}

.et_pb_section.tlc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(5, 10, 16, 0.92) 0%, rgba(5, 10, 16, 0.72) 34%, rgba(5, 10, 16, 0.18) 66%, rgba(5, 10, 16, 0.42) 100%),
    linear-gradient(to top, rgba(5, 10, 16, 0.85), rgba(5, 10, 16, 0) 36%);
}

.et_pb_section.tlc-hero .et_pb_row {
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  .et_pb_section.tlc-hero::before {
    background:
      linear-gradient(to bottom, rgba(5, 10, 16, 0.55) 0%, rgba(5, 10, 16, 0.82) 55%, rgba(5, 10, 16, 0.94) 100%);
  }
}

/* Final CTA as a Divi section with a background image */
.et_pb_section.tlc-cta--bg {
  position: relative;
  background-size: cover;
  background-position: center;
}

.et_pb_section.tlc-cta--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(7, 17, 31, 0.88);
}

.et_pb_section.tlc-cta--bg .et_pb_row {
  position: relative;
  z-index: 2;
}

/* Divi rows that should render as design-system grids.
   Columns become plain grid items. */
.et_pb_row.tlc-grid-row {
  display: grid !important;
}

.tlc-grid-row .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
}

.et_pb_row.tlc-row-services {
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--tlc-space-2xl);
  align-items: start;
}

.et_pb_row.tlc-row-tarifs {
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--tlc-space-2xl);
  align-items: start;
}

.et_pb_row.tlc-row-comfort {
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--tlc-space-2xl);
  align-items: center;
}

.et_pb_row.tlc-row-feedback {
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: var(--tlc-space-lg);
  align-items: start;
}

.et_pb_row.tlc-row-desthead {
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--tlc-space-lg);
  align-items: end;
  margin-bottom: var(--tlc-space-lg) !important;
}

.tlc-row-desthead .tlc-destinations__cta {
  justify-self: end;
}

@media (max-width: 1180px) {
  .et_pb_row.tlc-row-services,
  .et_pb_row.tlc-row-comfort,
  .et_pb_row.tlc-row-tarifs {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-xl);
  }
}

@media (max-width: 980px) {
  .et_pb_row.tlc-row-feedback,
  .et_pb_row.tlc-row-desthead {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tlc-row-desthead .tlc-destinations__cta {
    justify-self: start;
  }
}

/* ---------- Misc Divi cleanups ---------- */

/* Hide Divi's default page-wide top padding under our fixed header
   (the hero manages its own offset) */
.tlc-home #main-content .container {
  padding-top: 0;
}

/* Ensure Divi animations never introduce horizontal overflow */
#page-container {
  overflow-x: clip;
}

/* ---------- Divi's icon font (ETmodules) ---------- */
/*
   92 KB on every page, and Divi ships no .woff2 for it (that URL 404s), so the
   heavy .woff is what downloads, under font-display: block.

   FIRST ATTEMPT, AND WHY IT FAILED: re-declaring @font-face for the same family
   with an unreachable src does NOT suppress Divi's declaration. Both faces stay
   registered in the family — verified live: ours reports status "error", Divi's
   reports "loaded" — and a failed face simply does not participate in matching,
   so the browser falls back to the working one and fetches it anyway. The only
   thing that stops the request is leaving nothing that needs a glyph.

   So: remove the generated content instead. Measured on the live page, exactly
   two elements resolve to this family — Divi's header search icon, and the
   "Use Visual Builder" item in the admin bar, which only logged-in users ever
   see. This theme replaces Divi's header with its own markup and an inline SVG
   icon set, so nothing here is lost.

   If a future Divi update reintroduces the fetch, find the culprit the same way:
   walk every element, read getComputedStyle(el, '::before'/'::after'), and keep
   the ones whose fontFamily matches ETmodules and whose content is not "none".
*/
#et_search_icon::before,
#et_search_icon::after,
.et_close_search_field::before,
.et_close_search_field::after,
.mobile_menu_bar::before,
.mobile_menu_bar::after,
.et_pb_button::before,
.et_pb_button::after,
#wpadminbar .ab-item::before {
  content: none !important;
}

/* ---- responsive.css ---- */
/**
 * Taxi Lille Connect — Responsive refinements.
 * Mobile is designed intentionally, not merely shrunk.
 * Component files own their primary breakpoints; this file handles
 * cross-component layout shifts and small-screen polish.
 */

/* =========================================================
   ≤ 1180px — comfortable laptop
   ========================================================= */

@media (max-width: 1180px) {
  .tlc-services__layout,
  .tlc-comfort__layout {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-xl);
  }

  .tlc-section-head {
    max-width: 560px;
  }

  .tlc-destinations__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   ≤ 980px — tablet
   ========================================================= */

@media (max-width: 980px) {
  :root {
    --tlc-header-height: 64px;
  }

  .tlc-hero {
    min-height: 88vh;
  }

  .tlc-hero__media img,
  .tlc-hero__media {
    object-position: 74% center;
  }

  .tlc-trust__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlc-trust__item:nth-child(3) {
    border-left: 0;
  }

  .tlc-trust__item:nth-child(n+3) {
    border-top: 1px solid var(--tlc-color-line-dark);
  }

  .tlc-services__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlc-benefits__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tlc-benefit:nth-child(4) {
    border-left: 0;
  }

  .tlc-benefit:nth-child(n+4) {
    border-top: 1px solid var(--tlc-color-line-light);
  }

  .tlc-steps__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--tlc-space-xl) var(--tlc-space-lg);
  }

  .tlc-feedback__layout {
    grid-template-columns: 1fr;
  }

  .tlc-destinations__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tlc-destinations__cta {
    justify-self: start;
  }
}

/* =========================================================
   ≤ 700px — large phones
   ========================================================= */

@media (max-width: 700px) {
  .tlc-hero {
    min-height: 0;
    padding-top: calc(var(--tlc-header-height) + var(--tlc-space-2xl));
  }

  .tlc-hero__media::after {
    background:
      linear-gradient(to bottom, rgba(5, 10, 16, 0.55) 0%, rgba(5, 10, 16, 0.82) 55%, rgba(5, 10, 16, 0.94) 100%);
  }

  .tlc-hero__actions .tlc-btn {
    flex: 1 1 auto;
  }

  .tlc-comfort__gallery {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-lg);
  }

  .tlc-comfort__gallery .tlc-figure img {
    aspect-ratio: 16 / 10;
  }

  .tlc-destinations__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlc-destinations__grid .tlc-destination:last-child {
    grid-column: 1 / -1;
  }

  .tlc-destinations__grid .tlc-destination:last-child img {
    aspect-ratio: 16 / 9;
  }

  .tlc-review-card {
    padding: var(--tlc-space-lg) var(--tlc-space-md);
  }

  .tlc-review-card__actions .tlc-btn {
    width: 100%;
  }

  .tlc-cta__actions .tlc-btn {
    flex: 1 1 100%;
  }
}

/* =========================================================
   ≤ 480px — phones
   ========================================================= */

@media (max-width: 480px) {
  .tlc-trust__grid {
    grid-template-columns: 1fr;
  }

  .tlc-trust__item {
    padding: var(--tlc-space-md) 0;
  }

  .tlc-trust__item + .tlc-trust__item {
    border-left: 0;
    border-top: 1px solid var(--tlc-color-line-dark);
  }

  .tlc-services__grid {
    grid-template-columns: 1fr;
    border-left: 0;
    border-top: 0;
  }

  .tlc-service {
    border-right: 0;
    border-bottom: 1px solid var(--tlc-color-line-light);
  }

  .tlc-service__img {
    aspect-ratio: 16 / 9;
  }

  .tlc-service__body {
    padding: var(--tlc-space-md) 0;
  }

  .tlc-benefits__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tlc-benefit:nth-child(3) {
    border-left: 0;
  }

  .tlc-benefit:nth-child(n+3) {
    border-top: 1px solid var(--tlc-color-line-light);
  }

  .tlc-benefit:nth-child(even) {
    border-left: 1px solid var(--tlc-color-line-light);
  }

  .tlc-steps__grid {
    grid-template-columns: 1fr;
    gap: var(--tlc-space-lg);
  }

  .tlc-step {
    text-align: left;
    padding-inline: 0;
  }

  .tlc-step__num::after {
    margin-left: 0;
  }
}

/* =========================================================
   ≥ 1500px — large screens: keep hero art-directed
   ========================================================= */

@media (min-width: 1500px) {
  .tlc-hero {
    min-height: min(88vh, 960px);
  }
}