/* Distinction Esthétique Auto — UI Components
   Responsibility: reusable UI components — buttons, image placeholders,
   cards, tick bullets, doc layouts.
   Depends on: tokens.css + base.css.
   Design discipline: corners ≤ 2px, 1px hairlines only,
   no soft drop-shadows, gold used sparingly.
*/

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   Base class .dea-btn + variant modifiers:
     .dea-btn-primary  — gold fill, dark text
     .dea-btn-ghost    — transparent + hairline border
     .dea-btn-light    — cream fill, dark text
     .dea-btn-arrow    — any variant + trailing → arrow
   ══════════════════════════════════════════════════════════════════ */

.dea-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: none;
  border-radius: 0; /* sharp — no rounded corners */
  cursor: pointer;
  transition: all .22s var(--ease);
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary — gold fill */
.dea-btn-primary {
  background: var(--gold);
  color: var(--text-ink);
}
.dea-btn-primary:hover {
  background: var(--gold-hover);
}

/* Ghost — transparent with 1px hairline border */
.dea-btn-ghost {
  background: transparent;
  color: var(--text-cream);
  border: 1px solid var(--line-strong);
}
.dea-btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Bouton "Bientôt disponible" — Signature/Detailing tant que pas bookables
   via tunnel propriétaire. Visuellement désactivé mais lisible. */
.dea-btn--soon,
.dea-btn--soon:hover,
.dea-btn--soon:focus {
  cursor: not-allowed;
  border-style: dashed !important;
  border-color: rgba(213, 64, 21, 0.5) !important;
  color: var(--text-mute) !important;
  background: transparent !important;
  pointer-events: none;
  letter-spacing: 0.08em;
  text-transform: none;
}
.dea-btn--soon::before {
  content: '◷ ';
  margin-right: 6px;
  color: var(--gold);
}

/* Ghost (ink) — secondary button for use on light/cream sections:
   dark text + dark hairline border (never a pale ghost on a pale bg) */
.dea-btn-ghost--ink {
  color: var(--text-ink);
  border-color: var(--text-ink);
}
.dea-btn-ghost--ink:hover {
  border-color: var(--gold-on-cream);
  color: var(--gold-on-cream);
}

/* Light — cream fill for use on dark sections */
.dea-btn-light {
  background: var(--text-cream);
  color: var(--text-ink);
}
.dea-btn-light:hover {
  background: #ffffff;
}

/* Block modifier — stretches button to full container width (e.g. mobile menu CTA) */
.dea-btn--block {
  width: 100%;
  justify-content: center;
}

/* Arrow modifier — appends an animated → glyph */
.dea-btn-arrow::after {
  content: '→';
  font-family: var(--f-body);
  font-weight: 400;
  transition: transform .22s var(--ease);
}
.dea-btn-arrow:hover::after {
  transform: translateX(4px);
}

/* External-link indicator — when CTA opens in a new tab (Square redirect),
   replace the trailing arrow with the standard ↗ glyph and adjust hover. */
.dea-btn[target="_blank"]:not(.dea-btn-arrow)::after {
  content: '↗';
  font-family: var(--f-body);
  font-weight: 400;
  margin-left: 0.4em;
  display: inline-block;
  transition: transform .22s var(--ease);
}
.dea-btn[target="_blank"]:not(.dea-btn-arrow):hover::after {
  transform: translate(3px, -3px);
}
.dea-btn-arrow[target="_blank"]::after {
  content: '↗';
}
.dea-btn-arrow[target="_blank"]:hover::after {
  transform: translate(3px, -3px);
}

/* Reassurance line shown under the home-hero CTA — explains that the
   booking is handled by Square. Cream-on-dark style only (home hero).
   .dea-btn-reassurance__icon : the 🔒 emoji wrapper. */
.dea-btn-reassurance {
  margin: 0.65rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: rgba(245, 237, 224, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.dea-btn-reassurance__icon {
  font-size: 0.95em;
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════════
   IMAGE PLACEHOLDERS
   .dea-img           — dark variant (diagonal gold hairline stripes)
   .dea-img-cream     — light variant (diagonal ink hairline stripes)
   .dea-img-marks     — adds editorial crop-mark corners
   data-label attr    — shown as a monospace corner label via ::before
   ══════════════════════════════════════════════════════════════════ */

.dea-img {
  position: relative;
  background: #1a1815;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 14px,
    rgba(235, 51, 0, 0.05) 14px,
    rgba(235, 51, 0, 0.05) 15px
  );
  overflow: hidden;
}

/* Light cream variant */
.dea-img-cream {
  background: var(--bg-cream-2);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 14px,
    rgba(15, 16, 21, 0.05) 14px,
    rgba(15, 16, 21, 0.05) 15px
  );
}

/* Corner label sourced from data-label attribute */
.dea-img::before {
  content: attr(data-label);
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(235, 51, 0, 0.6);
}

.dea-img-cream::before {
  color: rgba(15, 16, 21, 0.4);
}

/* Editorial crop-mark corners (photo-shoot frame) */
.dea-img-marks::after {
  content: '';
  position: absolute;
  inset: 12px;
  pointer-events: none;
  background:
    /* top-left corner — horizontal */
    linear-gradient(to right, var(--gold) 14px, transparent 14px) top left / 14px 1px no-repeat,
    /* top-left corner — vertical */
    linear-gradient(to bottom, var(--gold) 14px, transparent 14px) top left / 1px 14px no-repeat,
    /* top-right corner — horizontal */
    linear-gradient(to left, var(--gold) 14px, transparent 14px) top right / 14px 1px no-repeat,
    /* top-right corner — vertical */
    linear-gradient(to bottom, var(--gold) 14px, transparent 14px) top right / 1px 14px no-repeat,
    /* bottom-left corner — horizontal */
    linear-gradient(to right, var(--gold) 14px, transparent 14px) bottom left / 14px 1px no-repeat,
    /* bottom-left corner — vertical */
    linear-gradient(to top, var(--gold) 14px, transparent 14px) bottom left / 1px 14px no-repeat,
    /* bottom-right corner — horizontal */
    linear-gradient(to left, var(--gold) 14px, transparent 14px) bottom right / 14px 1px no-repeat,
    /* bottom-right corner — vertical */
    linear-gradient(to top, var(--gold) 14px, transparent 14px) bottom right / 1px 14px no-repeat;
  opacity: 0.45;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS
   .dea-card — dark elevated card with 1px hairline border
   ══════════════════════════════════════════════════════════════════ */

.dea-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xs); /* 2px max */
  overflow: hidden;
  position: relative;
}

.dea-card-body {
  padding: 28px 24px;
}

.dea-card-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.dea-card-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-cream);
  margin-bottom: 10px;
}

.dea-card-copy {
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════════
   TICK BULLET
   Small gold-bordered circle — used as a list marker / feature tick.
   ══════════════════════════════════════════════════════════════════ */

.dea-tick {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 8px;
  margin-top: 4px;
}

/* Tick list row — pair .dea-tick with text inside a flex wrapper */
.dea-tick-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   GTRANSLATE — restyle du widget "Float" (utilisé par le shortcode)
   Structure cible : .gtranslate_wrapper > .gt_float_switcher > .gt-selected + .gt_options
   ══════════════════════════════════════════════════════════════════ */

/* 1) Cache le widget float automatique injecté au niveau <body> par le plugin
      — on garde uniquement celui placé via le shortcode dans le header */
body > .gtranslate_wrapper {
  display: none !important;
}

/* 2) Wrapper dans le header — neutralise la position par défaut */
.topbar__right .gtranslate_wrapper {
  display: inline-block !important;
  position: relative !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: middle;
}

/* 3) Switcher lui-même — restyle complet à la charte */
.topbar__right .gt_float_switcher {
  position: static !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--f-mono) !important;
  opacity: 1 !important;
  display: inline-block;
}

/* 4) Bouton "FR / EN" affiché */
.topbar__right .gt_float_switcher .gt-selected {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: 30px !important;
  min-width: 70px;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: border-color .18s var(--ease);
}
.topbar__right .gt_float_switcher .gt-selected:hover {
  border-color: var(--gold) !important;
}
.topbar__right .gt_float_switcher .gt-current-lang {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 10px !important;
  height: 28px;
  width: auto !important;
}
.topbar__right .gt_float_switcher .gt-current-lang img {
  width: 18px !important;
  height: 12px !important;
  display: inline-block;
  vertical-align: middle;
  border: 0 !important;
}
.topbar__right .gt_float_switcher .gt-lang-code {
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-cream) !important;
  font-weight: 500;
}
.topbar__right .gt_float_switcher:hover .gt-lang-code {
  color: var(--gold) !important;
}
.topbar__right .gt_float_switcher .gt_float_switcher-arrow {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-dim) !important;
  background: none !important;
  transition: transform .18s var(--ease), border-top-color .18s var(--ease);
}
.topbar__right .gt_float_switcher:hover .gt_float_switcher-arrow {
  border-top-color: var(--gold) !important;
}

/* 5) Dropdown — positionné absolute pour ne PAS pousser le header */
.topbar__right .gt_float_switcher .gt_options {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: max-content !important;
  min-width: 140px;
  background: var(--bg-deep, #1B1D21) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6) !important;
  padding: 4px 0 !important;
  z-index: 200;
}
.topbar__right .gt_float_switcher .gt_options a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px !important;
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-mute) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.topbar__right .gt_float_switcher .gt_options a:hover {
  background: var(--bg-chrome, #14161A) !important;
  color: var(--gold) !important;
}
.topbar__right .gt_float_switcher .gt_options a.gt-current {
  color: var(--gold) !important;
}
.topbar__right .gt_float_switcher .gt_options a img {
  width: 18px !important;
  height: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════
   BACK TO TOP — bouton retour en haut au scroll
   ══════════════════════════════════════════════════════════════════ */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-chrome, #14161A);
  color: var(--text-cream);
  border: 1px solid var(--gold);
  border-radius: 0;
  cursor: pointer;
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .18s var(--ease), color .18s var(--ease);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  padding: 0;
}
.back-to-top:hover {
  background: var(--gold);
  color: var(--text-ink);
}
.back-to-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top svg {
  display: block;
}
@media (max-width: 768px) {
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════
   STUDIO COMPARATIF — version 3 colonnes (page Expérience)
   Lavage Automatique · Lavage Traditionnel · Distinction
   ══════════════════════════════════════════════════════════════════ */

/* Quand un comparatif 3-col est inséré dans une .studio-section, on force
   la section à passer en single-column full-width pour que les 3 piliers
   respirent. Centre le bloc texte au-dessus. */
.studio-section:has(.studio-comparatif-3col) .studio-section__inner {
  grid-template-columns: 1fr;
  gap: 0;
}
.studio-section:has(.studio-comparatif-3col) .studio-section__text {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 48px;
}
.studio-section:has(.studio-comparatif-3col) .studio-section__body {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.studio-section:has(.studio-comparatif-3col) .section-eyebrow {
  justify-content: center;
}
/* Le comparatif lui-même : occupe toute la largeur disponible */
.studio-comparatif-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.studio-col {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.studio-col--featured {
  border-color: var(--gold);
  background:
    linear-gradient(180deg, rgba(235, 51, 0, 0.06) 0%, transparent 60%),
    var(--bg-card);
  position: relative;
}
.studio-col--featured::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--gold);
}
.studio-col__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.studio-col--featured .studio-col__label {
  color: var(--gold);
}
.studio-col__title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-cream);
  margin: 0 0 24px;
  line-height: 1.15;
  min-height: 52px;
}
.studio-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.studio-col__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mute);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.studio-col__item:first-child {
  border-top: none;
  padding-top: 0;
}
.studio-col--featured .studio-col__item {
  color: var(--text-cream);
}
.studio-col__criterion {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
}

/* Mark : ✕ (rouge subtil) pour cons, ✓ (or) pour pros */
.studio-col__mark {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 4px;
  border-radius: 50%;
}
.studio-col__mark--neg {
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
}
.studio-col__mark--pos {
  color: var(--gold);
  border: 1px solid var(--gold);
}

@media (max-width: 980px) {
  .studio-comparatif-3col {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 540px;
  }
  .studio-col__title { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   SIGNATURE — Comparatif Premium vs Signature (Phase 6 Go Live)
   ══════════════════════════════════════════════════════════════════ */
.sig-compare { padding: 100px 80px; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.sig-compare__inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.sig-compare__inner .section-eyebrow { justify-content: center; }
.sig-compare__headline { font-size: clamp(32px, 4.5vw, 52px); color: var(--text-cream); margin: 16px auto 18px; }
.sig-compare__intro { max-width: 640px; margin: 0 auto 48px; color: var(--text-mute); line-height: 1.7; font-size: 16px; }
.sig-compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; }
.sig-compare__col { background: var(--bg-card); border: 1px solid var(--line); padding: 36px 32px; display: flex; flex-direction: column; }
.sig-compare__col--featured { border-color: var(--gold); position: relative; background: linear-gradient(180deg, rgba(235,51,0,0.07) 0%, transparent 55%), var(--bg-card); }
.sig-compare__col--featured::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--gold); }
.sig-compare__col-label { color: var(--text-dim); margin-bottom: 8px; }
.sig-compare__col-label--gold { color: var(--gold); }
.sig-compare__col-title { font-family: var(--f-display); font-size: 24px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-cream); margin: 0 0 12px; line-height: 1.15; }
.sig-compare__col-price { font-size: 13px; color: var(--text-mute); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 22px; }
.sig-compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sig-compare__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--text-mute); padding-top: 12px; border-top: 1px solid var(--line); }
.sig-compare__item:first-child { padding-top: 0; border-top: none; }
.sig-compare__col--featured .sig-compare__item { color: var(--text-cream); }
.sig-compare__item--inherit { color: var(--text-cream); font-weight: 600; }
.sig-compare__mark { flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 3px; border-radius: 50%; }
.sig-compare__mark--ok { color: var(--text-mute); border: 1px solid var(--line-strong); }
.sig-compare__mark--gold { color: var(--gold); border: 1px solid var(--gold); font-weight: 600; }
.sig-compare__benefit-note { margin: 36px auto 0; max-width: 720px; color: var(--text-dim); line-height: 1.7; font-size: 13px; }
@media (max-width: 880px) {
  .sig-compare { padding: 64px 24px; }
  .sig-compare__grid { grid-template-columns: 1fr; gap: 16px; max-width: 540px; margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════
   HOME — FAQ + Reviews (Phase 5 & 7 Go Live)
   ══════════════════════════════════════════════════════════════════ */
.home-faq, .home-reviews { padding: 100px 80px; border-bottom: 1px solid var(--line); background: var(--bg-deep); }
.home-faq__inner, .home-reviews__inner { max-width: 980px; margin: 0 auto; }
.home-faq__headline, .home-reviews__headline { font-size: clamp(32px, 4.5vw, 52px); color: var(--text-cream); margin: 16px 0 24px; }
.home-reviews__intro { color: var(--text-mute); font-size: 16px; margin: 0 0 40px; }

/* FAQ accordion */
.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__toggle { width: 100%; background: transparent; border: 0; padding: 22px 0; cursor: pointer; color: var(--text-cream); display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; font-family: var(--f-body); font-size: 16px; font-weight: 500; transition: color .18s var(--ease); }
.faq__toggle:hover, .faq__toggle:focus-visible { color: var(--gold); outline: none; }
.faq__q { flex: 1 1 auto; line-height: 1.4; }
.faq__icon { font-family: var(--f-mono); font-size: 22px; line-height: 1; transition: transform .25s var(--ease); flex: 0 0 auto; color: var(--gold); }
.faq__toggle[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__answer { padding: 0 0 22px; color: var(--text-mute); line-height: 1.7; font-size: 15px; max-width: 760px; }

/* Reviews grid */
.home-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-reviews__card { background: var(--bg-card); border: 1px solid var(--line); padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.home-reviews__stars { color: var(--gold); font-size: 16px; letter-spacing: 0.08em; margin: 0; }
.home-reviews__quote { color: var(--text-cream); font-size: 15px; line-height: 1.65; font-style: normal; margin: 0; quotes: "« " " »"; }
.home-reviews__quote::before { content: open-quote; color: var(--gold); }
.home-reviews__quote::after { content: close-quote; color: var(--gold); }
.home-reviews__author { color: var(--text-dim); font-size: 13px; margin-top: auto; padding-top: 8px; }
.home-reviews__author-name { color: var(--text-cream); font-weight: 500; }
.home-reviews__cta-row { display: flex; gap: 16px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
@media (max-width: 880px) {
  .home-faq, .home-reviews { padding: 64px 24px; }
  .home-reviews__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════
   DETAILING — Carte "contenu détaillé à venir" (Phase 9 Go Live)
   ══════════════════════════════════════════════════════════════════ */
/* ── Grille de prix par taille véhicule (Detailing + Signature) ── */
.srv-palier__price-bloc { max-width: 720px; margin: 36px auto; text-align: left; }
.srv-palier__price-eyebrow { color: var(--text-dim); margin: 0 0 14px; }
.srv-palier__price-grid {
  display: grid;
  grid-template-columns: minmax(80px, max-content) 1fr;
  column-gap: 24px;
  row-gap: 10px;
  align-items: baseline;
}
.srv-palier__price-cell {
  display: contents; /* row du grid parent — le label et la valeur deviennent 2 cells */
}
.srv-palier__price-cell > .dea-label {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.16em;
}
.srv-palier__price-cell > .dea-num {
  color: var(--text-cream);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.srv-palier__price-note { margin: 18px 0 0; color: var(--text-dim); font-size: 12px; }
.srv-palier__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 720px;
  margin: 24px auto 0;
}
@media (max-width: 720px) {
  .srv-palier__cta-row .dea-btn { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   CONCESSIONNAIRES — section home + page dédiée
   ══════════════════════════════════════════════════════════════════ */
.home-conc { padding: 100px 80px; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.home-conc__inner { max-width: 1080px; margin: 0 auto; }
.home-conc__headline { font-size: clamp(32px, 4.5vw, 52px); color: var(--text-cream); margin: 16px 0 22px; }
.home-conc__body { color: var(--text-mute); font-size: 16px; line-height: 1.7; max-width: 720px; margin: 0 0 28px; }
.home-conc__list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; max-width: 720px; }
.home-conc__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text-cream); line-height: 1.55; }
.home-conc__mark { flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); border: 1px solid var(--gold); border-radius: 50%; font-size: 11px; margin-top: 2px; }
.home-conc__cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 880px) {
  .home-conc { padding: 64px 24px; }
  .home-conc__list { grid-template-columns: 1fr; gap: 12px; }
}

/* Page Concessionnaires — hero photo */
.conc-hero {
  background-size: cover;
  background-position: center;
  padding: 140px 80px 100px;
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.conc-hero__inner { max-width: 820px; margin: 0 auto; width: 100%; text-align: center; }
.conc-hero__inner .section-eyebrow { justify-content: center; }
.conc-hero__headline { font-size: clamp(36px, 5vw, 64px); color: var(--text-cream); margin: 18px 0 12px; line-height: 0.96; }
.conc-hero__subtitle {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.18em;
  margin: 0 auto 18px;
  max-width: 720px;
}
.conc-hero__lead { color: var(--text-cream); font-size: 17px; line-height: 1.7; max-width: 680px; margin: 0 auto 32px; opacity: 0.92; }

/* Bandeau de positionnement B2B juste sous le hero */
.conc-positioning-band {
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--line);
  padding: 18px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-cream);
  text-align: center;
}
.conc-positioning-band__mark {
  color: var(--gold);
  font-size: 16px;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .conc-positioning-band { padding: 16px 24px; font-size: 11px; line-height: 1.6; }
}

/* Phrase "intervention ponctuelle ou équipe dédiée" — Plan §10 */
.dea-conc-flex-note {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  padding: 20px 80px;
  margin: 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mute);
  font-style: italic;
}
@media (max-width: 720px) {
  .dea-conc-flex-note { padding: 16px 24px; font-size: 13.5px; }
}

.conc-hero__cta { margin: 0; }
@media (max-width: 880px) {
  .conc-hero { padding: 90px 24px 64px; min-height: 380px; }
}

/* Section "Notre modèle d'intervention" (mobile-first) */
.conc-model { padding: 90px 80px; background: var(--bg-deep); border-bottom: 1px solid var(--line); }
.conc-model__inner { max-width: 1080px; margin: 0 auto; }
.conc-model__headline { font-size: clamp(30px, 4vw, 46px); color: var(--text-cream); margin: 16px 0 22px; }
.conc-model__body { color: var(--text-mute); font-size: 16px; line-height: 1.75; max-width: 760px; margin: 0 0 40px; }
.conc-model__body strong { color: var(--text-cream); }
.conc-model__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.conc-model__card { background: var(--bg-card); border: 1px solid var(--line); padding: 32px 28px; }
.conc-model__card--featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(235,51,0,0.07) 0%, transparent 55%), var(--bg-card); position: relative; }
.conc-model__card--featured::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--gold); }
.conc-model__label { color: var(--text-dim); margin: 0 0 10px; }
.conc-model__card--featured .conc-model__label { color: var(--gold); }
.conc-model__title { font-family: var(--f-display); font-size: 22px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-cream); margin: 0 0 14px; line-height: 1.2; }
.conc-model__desc { color: var(--text-mute); font-size: 14.5px; line-height: 1.65; margin: 0; }
.conc-model__card--featured .conc-model__desc { color: var(--text-cream); }
@media (max-width: 880px) {
  .conc-model { padding: 64px 24px; }
  .conc-model__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Section "Pourquoi travailler avec nous" */
.conc-why { padding: 100px 80px; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.conc-why__inner { max-width: 1180px; margin: 0 auto; }
.conc-why__headline { font-size: clamp(30px, 4vw, 46px); color: var(--text-cream); margin: 16px 0 40px; }
.conc-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; }
.conc-why__item { background: var(--bg-card); border: 1px solid var(--line); padding: 32px 28px; }
.conc-why__num { color: var(--gold); font-size: 13px; letter-spacing: 0.16em; margin: 0 0 14px; display: block; }
.conc-why__item-title { font-family: var(--f-display); font-size: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-cream); margin: 0 0 12px; line-height: 1.25; }
.conc-why__item-body { color: var(--text-mute); font-size: 14.5px; line-height: 1.6; margin: 0; }
@media (max-width: 980px) {
  .conc-why { padding: 64px 24px; }
  .conc-why__grid { grid-template-columns: 1fr; gap: 14px; max-width: 540px; margin: 0 auto; }
}

/* Page Concessionnaires — sections intro + services + form */
.conc-intro, .conc-services, .conc-form-section { padding: 80px 80px; border-bottom: 1px solid var(--line); }
.conc-intro { background: var(--bg-deep); }
.conc-services { background: var(--bg-elev); }
.conc-intro__inner, .conc-services__inner { max-width: 880px; margin: 0 auto; }
.conc-intro__headline, .conc-services__headline { font-size: clamp(32px, 4.5vw, 48px); color: var(--text-cream); margin: 16px 0 24px; }
.conc-intro__body { color: var(--text-mute); font-size: 16px; line-height: 1.75; margin: 0 0 18px; }
.conc-intro__body strong { color: var(--text-cream); }
.conc-services__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
.conc-services__item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--text-cream); padding: 14px 0; border-top: 1px solid var(--line); }
.conc-services__item:first-child, .conc-services__item:nth-child(2) { border-top: 1px solid var(--line); }
.conc-services__mark { flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); border: 1px solid var(--gold); border-radius: 50%; font-size: 11px; margin-top: 2px; }
@media (max-width: 880px) {
  .conc-intro, .conc-services, .conc-form-section { padding: 56px 24px; }
  .conc-services__list { grid-template-columns: 1fr; gap: 0; }
}

/* Formulaire B2B */
.conc-form-section { background: var(--bg-deep); }
.conc-form-section__inner { max-width: 880px; margin: 0 auto; }
.conc-form-section__headline { font-size: clamp(30px, 4vw, 46px); color: var(--text-cream); margin: 16px 0 16px; }
.conc-form-section__intro { color: var(--text-mute); font-size: 16px; line-height: 1.7; max-width: 720px; margin: 0 0 40px; }

.conc-form { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.conc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.conc-form__field { display: flex; flex-direction: column; gap: 8px; }
.conc-form__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.conc-form__req { color: var(--gold); }
.conc-form__input {
  background: var(--bg-ink);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--text-cream);
  font-family: var(--f-body);
  font-size: 15px;
  padding: 14px 16px;
  transition: border-color .18s var(--ease);
  width: 100%;
}
.conc-form__input:focus {
  outline: none;
  border-color: var(--gold);
}
.conc-form__input::placeholder { color: var(--text-dim); opacity: 0.7; }
.conc-form__input--textarea { resize: vertical; min-height: 120px; }
.conc-form__actions { margin-top: 8px; }
.conc-form__actions .dea-btn { min-width: 260px; }
.conc-form__status {
  margin: 16px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}
.conc-form__status--pending { color: var(--text-mute); border-color: var(--line-strong); }
.conc-form__status--success { color: var(--text-cream); border-color: var(--gold); background: rgba(235,51,0,0.06); }
.conc-form__status--error { color: var(--text-cream); border-color: var(--gold); background: rgba(235,51,0,0.10); }
.conc-form__ref { display: inline-block; margin-top: 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; }
@media (max-width: 720px) {
  .conc-form__row { grid-template-columns: 1fr; gap: 22px; }
  .conc-form__actions .dea-btn { min-width: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM — page dédiée 2 formules
   ══════════════════════════════════════════════════════════════════ */
.prem-formulas { padding: 90px 80px; border-bottom: 1px solid var(--line); background: var(--bg-deep); }
.prem-formulas__inner { max-width: 1180px; margin: 0 auto; }
.prem-formulas__headline { font-size: clamp(32px, 4.5vw, 50px); color: var(--text-cream); margin: 16px 0 32px; }
.prem-formulas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prem-formula { background: var(--bg-card); border: 1px solid var(--line); padding: 36px 32px; display: flex; flex-direction: column; }
.prem-formula--featured { border-color: var(--gold); position: relative; background: linear-gradient(180deg, rgba(235,51,0,0.07) 0%, transparent 55%), var(--bg-card); }
.prem-formula--featured::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--gold); }
.prem-formula__label { color: var(--text-dim); margin: 0 0 6px; }
.prem-formula__label--gold { color: var(--gold); }
.prem-formula__title { font-family: var(--f-display); font-size: 26px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-cream); margin: 0 0 8px; line-height: 1.15; }
.prem-formula__price { color: var(--gold); font-size: 22px; margin: 0 0 4px; font-weight: 500; }
.prem-formula__pricing-note { color: var(--text-dim); font-size: 11px; margin: 0 0 18px; }
.prem-formula__desc { color: var(--text-mute); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; }
.prem-formula__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prem-formula__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--text-mute); padding-top: 10px; border-top: 1px solid var(--line); }
.prem-formula__item:first-child { padding-top: 0; border-top: none; }
.prem-formula--featured .prem-formula__item { color: var(--text-cream); }
.prem-formula__mark { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); border: 1px solid var(--gold); border-radius: 50%; font-size: 10px; margin-top: 3px; }
.prem-formula__cell-prices { display: flex; gap: 18px; padding: 14px 0; margin: 0 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.prem-formula__cell-prices > span { display: flex; flex-direction: column; gap: 4px; }
.prem-formula__cell-prices .dea-num { color: var(--text-cream); font-size: 14px; font-weight: 500; }
.prem-formula__cta { width: 100%; justify-content: center; margin-top: auto; }
.prem-formulas__note { color: var(--text-dim); margin: 36px auto 0; max-width: 720px; text-align: center; }
.prem-formulas__note a { color: var(--gold); text-decoration: none; }
.prem-formulas__note a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
  /* Tablette : 3 cards → 2 cards + reprise (la dernière passe sous) */
  .prem-formulas__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 720px) {
  .prem-formulas { padding: 64px 24px; }
  .prem-formulas__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   SERVICES — Hub à 3 cards (Premium / Signature / Detailing)
   ══════════════════════════════════════════════════════════════════ */
.srv-hub { padding: 90px 80px; background: var(--bg-deep); border-bottom: 1px solid var(--line); }
.srv-hub__inner { max-width: 1240px; margin: 0 auto; }
.srv-hub__headline { font-size: clamp(32px, 4.5vw, 52px); color: var(--text-cream); margin: 16px 0 40px; scroll-margin-top: 90px; }

/* ══════════════════════════════════════════════════════════════════
   DEA DETAIL — Layout générique pour pages de forfait détaillées.
   Utilisé par /detailing/ (Plan §5) ; réutilisable pour Premium/Signature.
   ══════════════════════════════════════════════════════════════════ */
.dea-detail { padding: 90px 80px; background: var(--bg-deep); border-bottom: 1px solid var(--line); }
.dea-detail__inner { max-width: 1080px; margin: 0 auto; }
.dea-detail__intro { margin-bottom: 56px; }
.dea-detail__headline { font-size: clamp(32px, 4.2vw, 50px); color: var(--text-cream); margin: 16px 0 28px; line-height: 1.05; }
.dea-detail__lead { color: var(--text-mute); font-size: 16.5px; line-height: 1.75; max-width: 760px; margin: 0 0 18px; }
.dea-detail__lead:last-of-type { margin-bottom: 0; }

.dea-detail__subhead {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--text-cream);
  margin: 0 0 24px;
}
.dea-detail__inclus { margin-bottom: 56px; }
.dea-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
}
.dea-detail__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-cream);
  font-size: 15.5px;
  line-height: 1.6;
}
.dea-detail__check { color: var(--gold); flex-shrink: 0; margin-top: 2px; font-weight: bold; }

.dea-detail__meta-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  margin-bottom: 36px;
}
.dea-detail__meta-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 22px 24px;
}
.dea-detail__meta-label { color: var(--text-dim); margin: 0 0 8px; }
.dea-detail__meta-value { font-size: clamp(20px, 2vw, 24px); color: var(--text-cream); margin: 0; }
.dea-detail__meta-value-sm { color: var(--text-mute); font-size: 14.5px; line-height: 1.6; margin: 0; }

.dea-detail__note {
  background: rgba(213, 64, 21, 0.08);
  border-left: 3px solid var(--gold);
  padding: 18px 22px;
  margin-bottom: 40px;
}
.dea-detail__note p { margin: 0; color: var(--text-cream); font-size: 14.5px; line-height: 1.65; }
.dea-detail__note strong { color: var(--gold-hover, #EB4E1F); }

@media (max-width: 880px) {
  .dea-detail { padding: 64px 24px; }
  .dea-detail__list { grid-template-columns: 1fr; gap: 12px; }
  .dea-detail__meta-row { grid-template-columns: 1fr; gap: 14px; }
}

/* Bloc "Quel forfait choisir ?" — Plan §3 (aide à la décision avant la grille) */
.srv-decision {
  margin: 0 0 56px;
  padding: 36px 32px;
  background: var(--bg-chrome);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
}
.srv-decision__headline {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--text-cream);
  margin: 0 0 24px;
}
.srv-decision__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 28px;
}
.srv-decision__card { display: flex; flex-direction: column; gap: 10px; }
.srv-decision__label {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.srv-decision__mark { font-size: 9px; flex-shrink: 0; }
.srv-decision__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-mute);
}
.srv-decision__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
@media (max-width: 880px) {
  .srv-decision { padding: 24px 18px; margin-bottom: 36px; }
  .srv-decision__grid { grid-template-columns: 1fr; gap: 18px; }
}

.srv-hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.srv-hub__card { background: var(--bg-card); border: 1px solid var(--line); padding: 32px 28px 32px; display: flex; flex-direction: column; position: relative; }
.srv-hub__card--featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(235,51,0,0.06) 0%, transparent 50%), var(--bg-card); }
.srv-hub__card--featured::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--gold); }
.srv-hub__badge { color: var(--gold); margin: 0 0 8px; }
.srv-hub__num { font-size: 12px; color: var(--text-dim); letter-spacing: 0.18em; margin: 0 0 6px; }
.srv-hub__name { font-family: var(--f-display); font-size: 28px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-cream); margin: 0 0 8px; line-height: 1.1; }
.srv-hub__price { color: var(--gold); font-size: 20px; font-weight: 500; margin: 0 0 18px; }
.srv-hub__desc { color: var(--text-mute); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; min-height: 100px; }
.srv-hub__card--featured .srv-hub__desc { color: var(--text-cream); }
.srv-hub__desc strong { color: var(--text-cream); font-weight: 600; }
.srv-hub__highlights { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
.srv-hub__highlights li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-mute); line-height: 1.55; }
.srv-hub__card--featured .srv-hub__highlights li { color: var(--text-cream); }
.srv-hub__tick { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); border: 1px solid var(--gold); border-radius: 50%; font-size: 10px; margin-top: 2px; }
.srv-hub__cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.srv-hub__cta-row .dea-btn { width: 100%; justify-content: center; height: 44px; }
.srv-hub__note { color: var(--text-dim); text-align: center; margin: 40px 0 0; }
.srv-hub__note a { color: var(--gold); text-decoration: none; }
.srv-hub__note a:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .srv-hub { padding: 64px 24px; }
  .srv-hub__grid { grid-template-columns: 1fr; gap: 18px; max-width: 540px; margin: 0 auto; }
  .srv-hub__desc { min-height: 0; }
}

/* Hero concessionnaires — mobile : titre + sous-titre plus aérés */
@media (max-width: 720px) {
  .conc-hero__headline { font-size: clamp(28px, 7vw, 38px); line-height: 1.08; padding: 0 4px; }
  .conc-hero__subtitle {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    line-height: 1.6;
    padding: 0 8px;
    color: var(--text-mute); /* moins agressif que --gold sur mobile */
  }
  .conc-hero__lead { font-size: 15px; line-height: 1.65; padding: 0 4px; }
}

.srv-palier__detail-soon-card { background: var(--bg-card); border: 1px solid var(--line); padding: 36px 32px; max-width: 720px; margin: 24px auto 36px; text-align: left; }
.srv-palier__detail-soon-label { color: var(--gold); margin: 0 0 14px; }
.srv-palier__detail-soon-body { color: var(--text-mute); line-height: 1.7; font-size: 15px; margin: 0 0 14px; }
.srv-palier__detail-soon-body strong { color: var(--text-cream); font-weight: 600; }
.srv-palier__detail-soon-actions { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .srv-palier__detail-soon-card { padding: 28px 22px; }
  .srv-palier__detail-soon-actions .dea-btn { flex: 1 1 100%; }
}