/* Variables de marque injectées par le MU-plugin litl-brand (wp_head) */

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--brand-primary);
    color: var(--brand-text);
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* ═══════════════════════════════════════════════════════
     WIREFRAME UTILITIES
     ═══════════════════════════════════════════════════════ */
  .placeholder {
    display: inline-block;
    color: var(--brand-text-dim);
    font-style: italic;
    font-weight: 400;
    background: rgba(var(--brand-accent-rgb),0.04);
    border: 1px dashed rgba(var(--brand-accent-rgb),0.25);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.92em;
  }
  .placeholder.block {
    display: block;
    padding: 16px 20px;
    margin: 8px 0;
  }

  /* ── Image placeholders ── */
  .img-placeholder {
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb),0.04) 0%, rgba(var(--brand-accent-rgb),0.08) 100%);
    border: 2px dashed rgba(var(--brand-accent-rgb),0.35);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--brand-text-muted);
    font-size: 12px;
    text-align: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
  }
  .img-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 12px,
      rgba(var(--brand-accent-rgb),0.025) 12px,
      rgba(var(--brand-accent-rgb),0.025) 13px
    );
    pointer-events: none;
  }
  .img-placeholder .ph-icon {
    width: 48px;
    height: 48px;
    color: var(--brand-accent);
    opacity: 0.8;
    position: relative;
    z-index: 1;
  }
  .img-placeholder .ph-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .img-placeholder .label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-accent);
    opacity: 0.95;
    position: relative;
    z-index: 1;
  }
  .img-placeholder .desc {
    font-size: 11px;
    color: var(--brand-text-muted);
    max-width: 90%;
    line-height: 1.5;
    position: relative;
    z-index: 1;
  }

  /* ── Source badge (which HTML file the section comes from) ── */
  .src-tag {
    position: absolute;
    top: 12px;
    right: 16px;
    background: var(--brand-accent);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 10;
    opacity: 0.9;
    pointer-events: none;
  }
  body.hide-sources .src-tag { display: none; }

  /* ── Section labels in wireframe mode ── */
  .wf-section {
    position: relative;
    border: 1px dashed transparent;
    transition: border-color 0.3s;
  }
  body.show-wireframe .wf-section {
    border-color: rgba(var(--brand-accent-rgb),0.4);
  }
  body.show-wireframe .wf-section::before {
    content: attr(data-section-name);
    position: absolute;
    top: -11px;
    left: 24px;
    /* IMPORTANT : reset des propriétés héritées de .hero::before (width/height/right
       à 700px/-200px) qui transformaient sinon ce label en rectangle solide
       de 700x700 px masquant tout le contenu hero-inner */
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    background: var(--brand-primary);
    color: var(--brand-accent);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    padding: 0 10px;
    text-transform: uppercase;
    z-index: 5;
  }

  /* ── Brand variable highlight (always visible) ── */
  body.show-vars [data-brand-var]:not(.img-placeholder):not(.hero-bg-placeholder) {
    background: rgba(var(--brand-accent-rgb),0.12);
    outline: 1px dashed rgba(var(--brand-accent-rgb),0.6);
    outline-offset: 2px;
    border-radius: 2px;
    position: relative;
  }
  body.show-vars [data-brand-var]:not(.img-placeholder):not(.hero-bg-placeholder)::after {
    content: '{{ ' attr(data-brand-var) ' }}';
    position: absolute;
    top: -14px;
    left: 0;
    background: var(--brand-accent);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 2px 2px 0 0;
    white-space: nowrap;
    text-transform: lowercase;
    letter-spacing: 0;
    pointer-events: none;
    z-index: 50;
    line-height: 1.4;
  }
  /* Image placeholders carry their own visible label with a {{ var }} chip */
  body.show-vars .img-placeholder[data-brand-var]::before,
  body.show-vars .hero-bg-placeholder[data-brand-var]::before {
    content: '{{ ' attr(data-brand-var) ' }}';
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--brand-accent);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 3px;
    text-transform: lowercase;
    letter-spacing: 0;
    z-index: 3;
    pointer-events: none;
  }
  /* Avoid overlapping tags when nested vars are close */
  body.show-vars [data-brand-var] [data-brand-var]:not(.img-placeholder):not(.hero-bg-placeholder)::after {
    top: -10px;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 01 — NAV
     ═══════════════════════════════════════════════════════ */
  .nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--brand-divider);
    padding: 18px 0;
  }
  .nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.5px;
  }
  .nav-logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--brand-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
  }
  .nav-logo-sub {
    font-size: 13px;
    color: var(--brand-text-muted);
    font-weight: 500;
    margin-left: 2px;
  }
  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
  }
  .nav-links a {
    color: var(--brand-text-muted);
    text-decoration: none;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--brand-accent); }
  /* Bouton du menu sur mobile et tablette : caché sur grand écran, voir @media (max-width: 1024px). */
  .nav-toggle { display: none; }

  .btn-primary {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    background: var(--brand-accent);
    color: #fff;
    border: none;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
  }
  .btn-primary:hover {
    background: var(--brand-accent-dark);
    transform: translateY(-1px);
  }
  .btn-secondary {
    background: transparent;
    color: var(--brand-text);
    border: 1px solid rgba(var(--brand-night-rgb),0.22);
    padding: 12px 22px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
  }
  .btn-secondary:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 02 — HERO
     ═══════════════════════════════════════════════════════ */
  .hero {
    padding: 100px 32px 80px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, var(--brand-accent-glow) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
  }
  /* Image de fond du héro, une fois déposée par l'établissement.
     Le texte du héro est sombre sur fond clair : le voile ÉCLAIRCIT l'image,
     plus dense côté texte, pour garder le titre lisible sans dénaturer la photo. */
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    /* Cadrage à DROITE : ces visuels d'ambiance placent le sujet à droite et
       laissent la gauche libre pour le titre. Un cadrage centré rognerait le
       sujet dès que la section est plus haute que l'image. */
    background-position: right center;
  }
  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Voile dégressif : dense sous le texte, nul sur le sujet. Calibré sur un
       visuel déjà clair ; il suffit à tenir le contraste du titre sans
       délaver la photo. */
    background: linear-gradient(
      100deg,
      rgba(255,255,255,0.80) 0%,
      rgba(255,255,255,0.55) 38%,
      rgba(255,255,255,0.15) 62%,
      rgba(255,255,255,0) 100%
    );
  }
  @media (max-width: 900px) {
    /* En colonne, le texte passe devant toute la largeur de l'image. */
    .hero-bg::after {
      background: rgba(255,255,255,0.88);
    }
  }
  .hero-bg-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb),0.04) 0%, rgba(var(--brand-accent-rgb),0.07) 100%);
    border: 2px dashed rgba(var(--brand-accent-rgb),0.25);
    /* Plus de flex : on positionne le label en absolu pour le contraindre
       à un coin (top-left), sans risque de débordement vers le contenu */
    overflow: hidden;
  }
  .hero-bg-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 18px,
      rgba(var(--brand-accent-rgb),0.025) 18px,
      rgba(var(--brand-accent-rgb),0.025) 19px
    );
    pointer-events: none;
  }
  .hero-bg-placeholder .bg-label {
    /* Repositionné en bottom-right (zone padding du hero, hors contenu hero-inner
       qui est centré verticalement et occupe les colonnes gauche/droite) */
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(0,0,0,0.88);
    border: 1px solid rgba(var(--brand-accent-rgb),0.4);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    backdrop-filter: blur(4px);
    /* Largeur contrainte selon le viewport, pas le parent */
    max-width: min(300px, calc(100vw - 48px));
    box-sizing: border-box;
  }
  .hero-bg-placeholder .bg-label .bg-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--brand-accent);
    margin-top: 1px;
  }
  .hero-bg-placeholder .bg-label .bg-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-bg-placeholder .bg-label .bg-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .hero-bg-placeholder .bg-label .bg-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-accent);
    font-weight: 500;
  }
  .hero-bg-placeholder .bg-label .bg-desc {
    font-size: 10px;
    color: var(--brand-text-muted);
    line-height: 1.4;
  }
  /* Héro sans visuel produit : le texte garde la colonne de gauche et laisse
     le sujet de l'image de fond respirer à droite. */
  .hero--sans-visuel .hero-inner {
    grid-template-columns: minmax(0, 620px);
  }
  .hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .hero-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 28px;
    padding: 6px 12px;
    background: rgba(var(--brand-accent-rgb),0.08);
    border-radius: 4px;
    border: 1px solid rgba(var(--brand-accent-rgb),0.2);
  }
  .hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 68px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 24px;
  }
  .hero h1 em {
    color: var(--brand-accent);
    font-style: normal;
    font-weight: 700;
  }
  .hero p.subtitle {
    font-size: 18px;
    color: var(--brand-text-muted);
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 480px;
  }
  .hero-ctas {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    padding: 18px 28px;
    font-size: 12px;
  }
  .btn-text {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--brand-text-muted) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(var(--brand-accent-rgb),0.4);
  }
  .btn-text:hover {
    color: var(--brand-accent) !important;
    text-decoration-color: var(--brand-accent);
  }
  .hero-reassurance {
    display: flex;
    gap: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--brand-divider);
  }
  .hero-reassurance .item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--brand-text-muted);
  }
  .hero-reassurance .item .dot {
    width: 6px;
    height: 6px;
    background: var(--brand-accent);
    border-radius: 50%;
  }

  .hero-visual {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .hero-visual .img-placeholder {
    aspect-ratio: 3/4;
    width: 100%;
    max-width: 440px;
    min-height: 520px;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 03 — STEPS (Comment ça marche)
     ═══════════════════════════════════════════════════════ */
  .steps {
    padding: 100px 32px;
    background: var(--brand-tertiary);
    border-top: 1px solid var(--brand-divider);
    border-bottom: 1px solid var(--brand-divider);
  }
  .section-header {
    max-width: 1280px;
    margin: 0 auto 56px;
    text-align: center;
  }
  .section-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 16px;
    display: inline-block;
  }
  .section-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 14px;
  }
  .section-header p {
    color: var(--brand-text-muted);
    max-width: 600px;
    margin: 0 auto;
    font-size: 16px;
  }
  .steps-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .step-card {
    padding: 36px 28px;
    background: var(--brand-card);
    border: 1px solid var(--brand-card-border);
    border-radius: 16px;
    position: relative;
  }
  .step-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-accent);
    margin-bottom: 16px;
    letter-spacing: 1px;
  }
  .step-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .step-card p {
    color: var(--brand-text-muted);
    font-size: 14px;
    line-height: 1.6;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 04 — FEATURES (Bénéfices)
     ═══════════════════════════════════════════════════════ */
  .features {
    padding: 100px 32px;
  }
  .features-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .feature-card {
    padding: 32px 24px;
    background: var(--brand-card);
    border: 1px solid var(--brand-card-border);
    border-radius: 14px;
    transition: border-color 0.2s;
  }
  .feature-card:hover {
    border-color: rgba(var(--brand-accent-rgb),0.35);
  }
  .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(var(--brand-accent-rgb),0.1);
    color: var(--brand-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
  }
  .feature-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .feature-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .feature-card p {
    color: var(--brand-text-muted);
    font-size: 13px;
    line-height: 1.55;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 05 — SPECS (Fiche technique)
     ═══════════════════════════════════════════════════════ */
  .specs {
    padding: 100px 32px;
    background: var(--brand-tertiary);
    border-top: 1px solid var(--brand-divider);
    border-bottom: 1px solid var(--brand-divider);
  }
  .specs-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: start;
  }
  .specs-visual .img-placeholder {
    aspect-ratio: 1/1;
    width: 100%;
  }
  .specs-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 14px;
  }
  .specs-intro {
    color: var(--brand-text-muted);
    margin-bottom: 32px;
    font-size: 15px;
  }
  .specs-table {
    border-top: 1px solid var(--brand-divider);
  }
  .specs-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--brand-divider);
    font-size: 13px;
  }
  .specs-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    padding-top: 2px;
  }
  .specs-value {
    color: var(--brand-text);
    font-weight: 500;
  }
  .specs-disclaimer {
    margin-top: 24px;
    padding: 14px 16px;
    background: rgba(var(--brand-accent-rgb),0.05);
    border-left: 3px solid var(--brand-accent);
    border-radius: 4px;
    font-size: 12px;
    color: var(--brand-text-muted);
    line-height: 1.5;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 06 — TARGETS (Pour qui)
     ═══════════════════════════════════════════════════════ */
  .targets {
    padding: 100px 32px;
  }
  .targets-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(var(--targets-n, 5), 1fr);
    gap: 16px;
  }
  .target-card {
    padding: 0;
    background: var(--brand-card);
    border: 1px solid var(--brand-card-border);
    border-radius: 14px;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
  }
  .target-card:hover {
    border-color: rgba(var(--brand-night-rgb),0.18);
    transform: translateY(-3px);
  }
  .target-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
  }
  .target-card-body {
    padding: 20px 18px;
  }
  .target-icon {
    font-size: 28px;
    margin-bottom: 14px;
    color: var(--brand-accent);
  }
  .target-icon img,
  .feature-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    /* Filtre pour rendre les pictos turquoise vers blanc (s'intègre à toutes palettes sombres) */
    filter: brightness(0) invert(1) opacity(0.85);
    transition: filter 0.2s, opacity 0.2s;
  }
  .feature-card:hover .feature-icon img {
    filter: brightness(0) invert(1) opacity(1);
  }
  .target-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .target-card p {
    color: var(--brand-text-muted);
    font-size: 12px;
    line-height: 1.5;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 07 — SECURITY (Certifications)
     ═══════════════════════════════════════════════════════ */
  .security {
    padding: 100px 32px;
    background: var(--brand-tertiary);
    border-top: 1px solid var(--brand-divider);
    border-bottom: 1px solid var(--brand-divider);
  }
  .security-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .security-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 14px;
    line-height: 1.1;
  }
  .security-content p {
    color: var(--brand-text-muted);
    margin-bottom: 28px;
  }
  .cert-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cert-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--brand-card);
    border: 1px solid var(--brand-card-border);
    border-radius: 8px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .cert-badge .dot {
    width: 6px;
    height: 6px;
    background: var(--brand-accent);
    border-radius: 50%;
    flex-shrink: 0;
  }
  .security-visual .img-placeholder {
    aspect-ratio: 4/5;
    width: 100%;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 08 — PRICING
     ═══════════════════════════════════════════════════════ */
  .pricing {
    padding: 100px 32px;
  }
  .pricing-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 48px;
    background: var(--brand-card);
    border: 1px solid var(--brand-accent);
    border-radius: 24px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 60px rgba(var(--brand-accent-rgb),0.08);
  }
  .pricing-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 20px;
  }
  .pricing-card h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
  }
  .price-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: var(--brand-accent);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -2px;
  }
  .price-currency {
    font-size: 32px;
    color: var(--brand-text-muted);
    font-weight: 500;
    margin-left: 6px;
  }
  .price-mention {
    font-size: 13px;
    color: var(--brand-text-muted);
    margin-bottom: 36px;
  }
  .pricing-features {
    list-style: none;
    text-align: left;
    margin: 0 auto 36px;
    max-width: 380px;
  }
  .pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--brand-divider);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .pricing-features li::before {
    content: '✓';
    color: var(--brand-accent);
    font-weight: 700;
  }
  .pricing-features li:last-child { border-bottom: none; }
  .pricing-disclaimer {
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(var(--brand-accent-rgb),0.05);
    border-left: 3px solid var(--brand-accent);
    border-radius: 4px;
    font-size: 11px;
    color: var(--brand-text-muted);
    text-align: left;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 09 — FAQ
     ═══════════════════════════════════════════════════════ */
  .faq {
    padding: 100px 32px;
    background: var(--brand-tertiary);
    border-top: 1px solid var(--brand-divider);
    border-bottom: 1px solid var(--brand-divider);
  }
  .faq-inner {
    max-width: 880px;
    margin: 0 auto;
  }
  .faq-list {
    margin-top: 48px;
  }
  .faq-item {
    border-bottom: 1px solid var(--brand-divider);
  }
  .faq-item summary {
    padding: 24px 0;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 500;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+';
    color: var(--brand-accent);
    font-size: 22px;
    font-weight: 300;
    transition: transform 0.2s;
  }
  .faq-item[open] summary::after {
    transform: rotate(45deg);
  }
  .faq-item summary:hover { color: var(--brand-accent); }
  .faq-answer {
    padding: 0 0 24px;
    color: var(--brand-text-muted);
    font-size: 14px;
    line-height: 1.7;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 10 — CTA FINAL
     ═══════════════════════════════════════════════════════ */
  .cta-final {
    padding: 140px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Version Corail de la charte (accroche / zone de conversion) */
    background: linear-gradient(160deg, var(--brand-accent) 0%, var(--brand-accent-dark) 100%);
  }
  .cta-final::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.14) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
  }
  /* CTA final = fond corail → texte blanc + boutons inversés */
  .cta-final h2,
  .cta-final h2 em,
  .cta-final p { color: #fff !important; }
  .cta-final .btn-primary { background: #fff; color: var(--brand-accent); }
  .cta-final .btn-primary:hover { background: var(--brand-night); color: #fff; }
  .cta-final .btn-secondary { border-color: rgba(255,255,255,0.6); color: #fff; }
  .cta-final .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.12); color: #fff; }
  .cta-final-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .cta-final h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 56px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 24px;
  }
  .cta-final h2 em {
    color: var(--brand-accent);
    font-style: normal;
  }
  .cta-final p {
    color: var(--brand-text-muted);
    font-size: 17px;
    max-width: 540px;
    margin: 0 auto 36px;
  }
  .cta-final .cta-img {
    aspect-ratio: 8/3;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 40px;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION 11 — CONTACT
     ═══════════════════════════════════════════════════════ */
  .contact {
    padding: 100px 32px;
    background: var(--brand-tertiary);
    border-top: 1px solid var(--brand-divider);
    border-bottom: 1px solid var(--brand-divider);
  }
  .contact-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    /* En-tête sur la 1re rangée ; formulaire et carte côte à côte sur la 2e,
       pour que le haut de la carte s'aligne sur celui du formulaire. */
    grid-template-areas: "head ." "main info";
    gap: 32px 64px;
  }
  .contact-head { grid-area: head; }
  .contact-main { grid-area: main; }
  .contact h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 14px;
  }
  .contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contact-form .full {
    grid-column: 1 / -1;
  }
  .contact-form label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    margin-bottom: 6px;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100%;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--brand-card-border);
    color: var(--brand-text);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
  }
  .contact-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--brand-accent) 50%), linear-gradient(135deg, var(--brand-accent) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
  }
  .contact-form textarea { min-height: 120px; resize: vertical; }
  .contact-form input:focus,
  .contact-form textarea:focus,
  .contact-form select:focus {
    outline: none;
    border-color: var(--brand-accent);
  }
  /* Sub-section header inside form (Identité / Entreprise / Commande / Livraison) */
  .form-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--brand-divider);
  }
  .form-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .form-section .form-section-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--brand-accent);
    background: rgba(var(--brand-accent-rgb),0.1);
    border: 1px solid rgba(var(--brand-accent-rgb),0.3);
    border-radius: 3px;
    padding: 2px 6px;
  }
  .form-section .form-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .form-section .form-section-hint {
    font-size: 11px;
    color: var(--brand-text-dim);
    font-style: italic;
    margin-left: auto;
  }
  /* Conditional sub-block (e.g. adresse postale visible only if "Livraison postale") */
  .form-conditional {
    grid-column: 1 / -1;
    padding: 14px;
    background: rgba(var(--brand-accent-rgb),0.03);
    border-left: 3px solid var(--brand-accent);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .form-conditional .full { grid-column: 1 / -1; }
  .form-conditional-tag {
    grid-column: 1 / -1;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 4px;
  }
  .form-rgpd {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--brand-text-muted);
    line-height: 1.5;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--brand-divider);
  }
  .form-rgpd input { width: auto; margin-top: 3px; }
  .contact-info {
    background: var(--brand-card);
    border: 1px solid var(--brand-card-border);
    border-radius: 14px;
    padding: 32px;
    grid-area: info;
    height: fit-content;
  }
  .contact-info h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    margin-bottom: 18px;
    font-weight: 600;
  }
  .contact-info-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--brand-divider);
    font-size: 13px;
    color: var(--brand-text-muted);
  }
  .contact-info-row strong {
    color: var(--brand-text);
    font-weight: 600;
  }
  .contact-info-row:last-child { border-bottom: none; }

  /* ═══════════════════════════════════════════════════════
     SECTION 12 — FOOTER
     ═══════════════════════════════════════════════════════ */
  footer {
    background: var(--brand-night);
    padding: 64px 32px 28px;
  }
  .footer-inner {
    max-width: 1280px;
    margin: 0 auto;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--brand-divider);
  }
  .footer-brand .nav-logo { margin-bottom: 16px; }
  /* Logo d'établissement : hauteur fixe, largeur libre (logos horizontaux ou verticaux). */
  .nav-logo-img { display: block; height: 48px; width: auto; max-width: 220px; object-fit: contain; }
  .footer-brand .nav-logo-img { height: 56px; max-width: 240px; }
  @media (max-width: 640px) { .nav-logo-img { height: 40px; max-width: 160px; } }
  .footer-brand p {
    color: var(--brand-text-dim);
    font-size: 13px;
    max-width: 320px;
    line-height: 1.6;
  }
  .footer-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-accent-on-dark, var(--brand-accent));
    margin-bottom: 16px;
  }
  .footer-links {
    list-style: none;
  }
  .footer-links li,
  .footer-links a {
    color: var(--brand-text-muted);
    font-size: 13px;
    text-decoration: none;
    padding: 5px 0;
    display: block;
  }
  .footer-links a:hover { color: var(--brand-accent); }
  .footer-bottom {
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 11px;
    color: var(--brand-text-dim);
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
  }
  .footer-powered {
    color: var(--brand-accent-on-dark, var(--brand-accent));
    opacity: 0.85;
  }
  /* Footer = fond bleu nuit → texte clair */
  footer .footer-brand p { color: rgba(255,255,255,0.55); }
  footer .footer-links li,
  footer .footer-links a { color: rgba(255,255,255,0.6); }
  footer .footer-links a:hover { color: var(--brand-accent-on-dark, var(--brand-accent)); }
  footer .nav-logo-word .logo-dot { color: var(--brand-accent-on-dark, var(--brand-accent)); }
  footer .footer-bottom { color: rgba(255,255,255,0.45); }
  footer .footer-grid { border-bottom-color: rgba(255,255,255,0.12); }
  footer .nav-logo-word { color: #fff; }

  /* ═══ Wordmark LITL — "litl." minuscules + point corail ═══ */
  .nav-logo-word {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -1.5px;
    line-height: 1;
    color: var(--brand-text);
  }
  .nav-logo-word .logo-dot { color: var(--brand-accent); }


  /* ═══════════════════════════════════════════════════════
     MODE PRÉSENTATION — override des annotations wireframe
     (cache toutes les annotations debug pour rendu "site réel")
     ═══════════════════════════════════════════════════════ */
  .src-tag { display: none !important; }
  .wf-section { border-color: transparent !important; }
  .wf-section::before { display: none !important; }
  /* Override des chips wireframe SAUF pour les éléments qui ont leur propre style.
     ⚠️ Ce « background: transparent !important » efface AUSSI une image de fond
     posée en style en ligne : tout élément annoté qui porte son propre fond doit
     être exclu ici, comme .hero-bg. */
  [data-brand-var]:not(.nav-logo-mark):not(.hero-bg) {
    background: transparent !important;
    outline: none !important;
    padding: 0 !important;
  }
  /* .hero-bg est exclu : son ::after est le voile de lisibilité du titre,
     pas une étiquette de maquette. */
  [data-brand-var]:not(.hero-bg)::after { display: none !important; }
  .placeholder {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-style: normal !important;
    padding: 0 !important;
    font-size: inherit !important;
  }
  /* Image placeholders : rendu propre */
  .img-placeholder {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-tertiary) 100%) !important;
    border: 1px solid var(--brand-card-border) !important;
  }
  .img-placeholder::after { display: none !important; }
  .img-placeholder .ph-icon {
    color: var(--brand-text-dim) !important;
    opacity: 0.4 !important;
  }
  .img-placeholder .label,
  .img-placeholder .desc { display: none !important; }
  .hero-bg-placeholder {
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb),0.05) 0%, rgba(var(--brand-accent-rgb),0.02) 100%) !important;
    border: none !important;
  }
  .hero-bg-placeholder::after { display: none !important; }
  .hero-bg-placeholder .bg-label { display: none !important; }

  /* ═══════════════════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════════════════ */
  @media (max-width: 1024px) {
    .hero h1 { font-size: 50px; }
    .hero-inner,
    .specs-inner,
    .security-inner,
    .contact-inner { grid-template-columns: 1fr; grid-template-areas: "head" "main" "info"; gap: 32px; }
    .steps-grid,
    .targets-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .nav-links { display: none; }
    /* Menu sur mobile et tablette (retour de Clémence du 26/10/2026) : bouton à trois traits, liens en panneau sous la barre. */
    .nav-bar .btn-primary { margin-left: auto; }
    .nav-toggle {
      display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 44px; height: 44px; margin-left: 12px; padding: 0 11px; flex: none;
      background: transparent; border: 1px solid var(--brand-divider); border-radius: 10px; cursor: pointer;
    }
    .nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--brand-text); transition: transform .2s ease, opacity .2s ease; }
    .nav-toggle:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
    .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-open .nav-links {
      display: flex; flex-direction: column; gap: 0;
      position: absolute; top: 100%; left: 0; right: 0;
      padding: 4px 32px 16px; background: #fff;
      border-bottom: 1px solid var(--brand-divider); box-shadow: 0 16px 32px rgba(0,0,0,.08);
    }
    .nav-open .nav-links a { display: block; padding: 14px 0; font-size: 12px; color: var(--brand-text); border-bottom: 1px solid var(--brand-divider); }
    .nav-open .nav-links li:last-child a { border-bottom: 0; }
  }
  @media (max-width: 640px) {
    .nav-open .nav-links { padding: 4px 20px 16px; }
  }
  @media (max-width: 640px) {
    .hero h1 { font-size: 40px; }
    .cta-final h2 { font-size: 36px; }
    .section-header h2 { font-size: 32px; }
    .steps-grid,
    .targets-grid,
    .features-grid,
    .contact-form,
    .footer-grid { grid-template-columns: 1fr; }
    .pricing-card { padding: 36px 24px; }
    .price-amount { font-size: 48px; }
  }


/* ── Formulaire de contact : honeypot + messages ─────────────────── */
.litl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.litl-form-notice { grid-column: 1 / -1; padding: 14px 18px; border-radius: 10px; margin-bottom: 18px;
  font-size: 14px; line-height: 1.5; border: 1px solid; }
.litl-form-notice--ok { background: var(--brand-accent-glow); border-color: var(--brand-accent); color: var(--brand-text); }
.litl-form-notice--ko { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.35); color: #b91c1c; }

/* ── Tunnel de souscription ──────────────────────────────────────── */
.litl-step-title { margin: 26px 0 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-accent); font-family: 'IBM Plex Mono', monospace; }
.litl-order-form select { width: 100%; padding: 12px 14px; border: 1px solid var(--brand-card-border);
  border-radius: 8px; background: #fff; font-family: inherit; font-size: 15px; color: var(--brand-text); }
.litl-order-form input[readonly] { background: var(--brand-secondary); color: var(--brand-text-muted); cursor: not-allowed; }
.litl-order-form [hidden] { display: none !important; }
.litl-recap { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--brand-card-border);
  border-radius: 12px; background: var(--brand-secondary); }
.litl-recap .recap-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.litl-recap .recap-row.total { border-top: 1px solid var(--brand-card-border); margin-top: 8px; padding-top: 12px;
  font-weight: 700; font-size: 17px; }
.litl-recap .field-note { display: block; margin-top: 10px; }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS & INTERACTIONS
   Tout est conditionné à prefers-reduced-motion : un visiteur
   ayant demandé moins d'animations voit la page statique.
   ═══════════════════════════════════════════════════════ */

/* Défilement fluide + décalage pour la barre de navigation fixe */
html { scroll-behavior: smooth; }
section[id], footer[id] { scroll-margin-top: 90px; }

/* — Révélation au défilement — */
.litl-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.litl-reveal.is-visible { opacity: 1; transform: none; }
/* Cascade légère pour les groupes de cartes */
.litl-reveal[data-d="1"] { transition-delay: .08s; }
.litl-reveal[data-d="2"] { transition-delay: .16s; }
.litl-reveal[data-d="3"] { transition-delay: .24s; }
.litl-reveal[data-d="4"] { transition-delay: .32s; }

/* — Entrée du héros au chargement — */
@keyframes litlFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-eyebrow, .hero h1, .hero .subtitle, .hero-cta, .hero-reassurance {
  animation: litlFadeUp .8s cubic-bezier(.22,.61,.36,1) both;
}
.hero h1 { animation-delay: .06s; }
.hero .subtitle { animation-delay: .14s; }
.hero-cta { animation-delay: .22s; }
.hero-reassurance { animation-delay: .3s; }

/* — Micro-interactions — */
.step-card, .feature-card, .target-card, .pricing-card, .security-card {
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.step-card:hover, .feature-card:hover, .target-card:hover, .security-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(var(--brand-night-rgb),.09);
  border-color: var(--brand-accent);
}
.target-card:hover .target-photo { transform: scale(1.05); }
.target-photo { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.target-card { overflow: hidden; }

.btn-primary, .btn-secondary {
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--brand-accent-glow); }
.btn-secondary:hover { transform: translateY(-2px); }

/* Accordéon FAQ : ouverture douce */
.faq-item { transition: border-color .3s ease, background .3s ease; }
.faq-item[open] { border-color: var(--brand-accent); }
.faq-item summary { transition: color .25s ease; }
.faq-answer { animation: litlFadeUp .35s ease both; }

/* Barre de navigation : compacte et ombrée après défilement */
.nav-bar { transition: box-shadow .3s ease, background .3s ease, padding .3s ease; }
.nav-bar.is-scrolled {
  box-shadow: 0 2px 18px rgba(var(--brand-night-rgb),.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
}

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .litl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-eyebrow, .hero h1, .hero .subtitle, .hero-cta, .hero-reassurance,
  .faq-answer { animation: none !important; }
  .step-card, .feature-card, .target-card, .security-card, .btn-primary, .btn-secondary,
  .target-photo { transition: none !important; }
  .step-card:hover, .feature-card:hover, .target-card:hover, .security-card:hover,
  .btn-primary:hover, .btn-secondary:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════
   SIGNATURE VISUELLE
   Quatre effets discrets : le raffinement plutôt que l'esbroufe.
   Tous neutralisés par prefers-reduced-motion (voir plus bas).
   ═══════════════════════════════════════════════════════ */

/* 1 — Le terminal respire, et suit légèrement le regard */
.hero-visual { perspective: 1200px; }
.hero-visual img,
.hero-visual .img-placeholder {
  animation: litlFloat 7s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes litlFloat {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-15px) }
}
.hero-visual .litl-tilt {
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
}

/* 2 — Halo qui suit le curseur sur les cartes (lueur de la couleur d'accent) */
.step-card, .feature-card, .target-card, .pricing-card { position: relative; isolation: isolate; }
.step-card::after, .feature-card::after, .target-card::after, .pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              var(--brand-accent-glow), transparent 45%);
}
.step-card:hover::after, .feature-card:hover::after,
.target-card:hover::after, .pricing-card:hover::after { opacity: 1; }

/* 3 — Fine barre de progression de lecture */
.litl-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-dark));
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 999; pointer-events: none;
  transition: transform .1s linear;
}

/* 4 — Le prix s'inscrit avec les chiffres tabulaires (pas de tremblement au comptage) */
.price-amount { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .hero-visual img, .hero-visual .img-placeholder { animation: none !important; }
  .hero-visual .litl-tilt { transform: none !important; transition: none !important; }
  .step-card::after, .feature-card::after, .target-card::after, .pricing-card::after { display: none; }
  .litl-progress { display: none; }
}
/* ═══ Tunnel de souscription — design repris de la maquette validée ═══ */
/* ═══════════════════════════════════════════════════════
     SECTION 02 — PAGE HEADER (breadcrumb + titre + step indicator)
     ═══════════════════════════════════════════════════════ */
  .page-header {
    padding: 80px 32px 40px;
    position: relative;
    overflow: hidden;
  }
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--brand-accent-glow) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
.page-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
.breadcrumb {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    margin-bottom: 24px;
    display: flex;
    gap: 10px;
    align-items: center;
  }
.breadcrumb a { color: var(--brand-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-accent); }
.breadcrumb .sep { color: var(--brand-accent); opacity: 0.5; }
.breadcrumb .current { color: var(--brand-accent); }
.page-header h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 56px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 16px;
  }
.page-header h1 em {
    color: var(--brand-accent);
    font-style: normal;
    font-weight: 700;
  }
.page-header .subtitle {
    font-size: 17px;
    color: var(--brand-text-muted);
    max-width: 720px;
    line-height: 1.6;
    margin-bottom: 36px;
  }
/* Step indicator (1. Vos infos · 2. Validation CSB · 3. Confirmation) */
  .steps-indicator {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--brand-card);
    border: 1px solid var(--brand-card-border);
    border-radius: 14px;
    align-items: center;
  }
.step-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--brand-secondary);
    border: 1px solid var(--brand-card-border);
    border-radius: 10px;
    transition: all 0.2s;
  }
.step-pill.active {
    border-color: var(--brand-accent);
    background: rgba(var(--brand-accent-rgb),0.08);
  }
.step-pill .num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(var(--brand-accent-rgb),0.15);
    color: var(--brand-accent);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
  }
.step-pill.active .num { background: var(--brand-accent); color: #fff; }
.step-pill .label {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
.step-pill .label-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-text-dim);
  }
.step-pill .label-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
  }
.step-pill.active .label-tag { color: var(--brand-accent); }
.step-arrow { color: var(--brand-text-dim); font-size: 14px; }
/* ═══════════════════════════════════════════════════════
     SECTION 03 — ORDER LAYOUT (form + sidebar récap)
     ═══════════════════════════════════════════════════════ */
  .order {
    padding: 60px 32px 100px;
  }
.order-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 40px;
    align-items: start;
  }
/* Form card */
  .order-form-card {
    background: var(--brand-tertiary);
    border: 1px solid var(--brand-card-border);
    border-radius: 16px;
    padding: 40px;
  }
.order-form-card h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
  }
.order-form-card .form-intro {
    color: var(--brand-text-muted);
    font-size: 14px;
    margin-bottom: 32px;
  }
.order-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
.order-form .full { grid-column: 1 / -1; }
.order-form label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    margin-bottom: 6px;
  }
.order-form input,
  .order-form select,
  .order-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--brand-card-border);
    color: var(--brand-text);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
  }
.order-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--brand-accent) 50%), linear-gradient(135deg, var(--brand-accent) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
  }
.order-form input[readonly] {
    background: var(--brand-secondary);
    color: var(--brand-text-muted);
    cursor: not-allowed;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
.order-form input:focus,
  .order-form select:focus,
  .order-form textarea:focus {
    outline: none;
    border-color: var(--brand-accent);
  }
/* Sub-section header (Identité / Entreprise / Commande / Livraison) */
  .form-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--brand-divider);
  }
.form-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
.form-section .form-section-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--brand-accent);
    background: rgba(var(--brand-accent-rgb),0.1);
    border: 1px solid rgba(var(--brand-accent-rgb),0.3);
    border-radius: 3px;
    padding: 2px 6px;
  }
.form-section .form-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
.form-section .form-section-hint {
    font-size: 11px;
    color: var(--brand-text-dim);
    font-style: italic;
    margin-left: auto;
  }
/* Conditional sub-block */
  .form-conditional {
    grid-column: 1 / -1;
    padding: 14px;
    background: rgba(var(--brand-accent-rgb),0.03);
    border-left: 3px solid var(--brand-accent);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
.form-conditional .full { grid-column: 1 / -1; }
.form-conditional-tag {
    grid-column: 1 / -1;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 4px;
  }
.form-helper {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--brand-text-dim);
    font-style: italic;
    margin-top: -8px;
  }
.form-helper code {
    color: var(--brand-accent);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
  }
.form-submit-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
  }
.form-submit-row .submit-note {
    font-size: 11px;
    color: var(--brand-text-dim);
    flex: 1;
  }
/* Sidebar récapitulatif (sticky) */
  .order-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
.recap-card,
  .info-card {
    background: var(--brand-card);
    border: 1px solid var(--brand-card-border);
    border-radius: 14px;
    padding: 24px;
  }
.recap-card {
    border-color: var(--brand-accent);
    background: rgba(var(--brand-accent-rgb),0.04);
  }
.recap-card h3,
  .info-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
.recap-card h3::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-accent);
  }
.recap-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed var(--brand-divider);
    font-size: 13px;
  }
.recap-row:last-of-type { border-bottom: none; }
.recap-row .label {
    color: var(--brand-text-muted);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
.recap-row .value {
    color: var(--brand-text);
    font-weight: 600;
  }
.recap-row.total {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--brand-card-border);
    border-bottom: none;
  }
.recap-row.total .label {
    color: var(--brand-text);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
  }
.recap-row.total .value {
    color: var(--brand-accent);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
  }
.channel-badge {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--brand-secondary);
    border-radius: 8px;
    font-size: 12px;
    color: var(--brand-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }
.channel-badge .dot {
    width: 6px; height: 6px;
    background: var(--brand-accent);
    border-radius: 50%;
  }
.channel-badge code {
    color: var(--brand-accent);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
  }
.info-card .info-row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    font-size: 12px;
    color: var(--brand-text-muted);
    line-height: 1.5;
  }
.info-card .info-row .icon {
    color: var(--brand-accent);
    flex-shrink: 0;
    font-weight: 700;
  }
/* ═══════════════════════════════════════════════════════
     SECTION 04 — PROCESS (Que se passe-t-il après ?)
     ═══════════════════════════════════════════════════════ */
  .process {
    padding: 100px 32px;
    background: var(--brand-tertiary);
    border-top: 1px solid var(--brand-divider);
    border-bottom: 1px solid var(--brand-divider);
  }
.process-timeline {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
  }
.process-step {
    padding: 32px 28px;
    background: var(--brand-card);
    border: 1px solid var(--brand-card-border);
    border-radius: 16px;
    position: relative;
  }
.process-step .step-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-accent);
    margin-bottom: 16px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
.process-step .step-num::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--brand-accent);
  }
.process-step h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
  }
.process-step p {
    color: var(--brand-text-muted);
    font-size: 14px;
    line-height: 1.6;
  }
.process-step .tech-note {
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--brand-secondary);
    border-left: 2px solid var(--brand-accent);
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--brand-text-dim);
    line-height: 1.5;
  }
.process-step .tech-note strong {
    color: var(--brand-accent);
    font-weight: 500;
  }
@media (max-width: 1024px) {
  .page-header h1 { font-size: 42px; }
  .order-inner { grid-template-columns: 1fr; }
  .order-sidebar { position: static; }
  .process-timeline { grid-template-columns: 1fr; }
  .steps-indicator { flex-direction: column; align-items: stretch; }
  .step-arrow { transform: rotate(90deg); align-self: center; }
}
@media (max-width: 640px) {
  .page-header h1 { font-size: 32px; }
  .order-form { grid-template-columns: 1fr; }
  .form-conditional { grid-template-columns: 1fr; }
  .order-form-card { padding: 24px; }
}
/* ═══════════════════════════════════════════════════════
   TUNNEL — adaptation de la maquette (structure plate)
   à notre balisage imbriqué : .form-section groupe son
   titre, sa grille de champs et ses blocs conditionnels.
   Rendu visuel identique à la maquette livrée.
   ═══════════════════════════════════════════════════════ */
.litl-order-form { display: block; }
.litl-order-form .form-section {
  display: block;
  grid-column: auto;
}
.litl-order-form .form-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.litl-order-form .form-section-title .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--brand-accent);
  background: rgba(var(--brand-accent-rgb),0.1);
  border: 1px solid rgba(var(--brand-accent-rgb),0.3);
  border-radius: 3px;
  padding: 2px 6px;
  text-transform: none;
}
.litl-order-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.litl-order-form .form-grid > .full { grid-column: 1 / -1; }
.litl-order-form .form-conditional {
  display: block;
  grid-column: auto;
  margin-top: 16px;
}
.litl-order-form .form-conditional .form-conditional-tag { margin-bottom: 10px; }
@media (max-width: 640px) {
  .litl-order-form .form-grid { grid-template-columns: 1fr; }
}
/* Cases à cocher / radios : ne pas hériter du width:100% des champs texte */
.litl-order-form input[type="checkbox"],
.litl-order-form input[type="radio"] {
  width: auto;
  flex: none;
  padding: 0;
  margin-top: 3px;
  background: none;
  border-radius: 0;
}
/* Note d'aide contextuelle sous un champ (repris de la maquette livrée) */
.litl-order-form .field-note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--brand-text-muted);
  background: var(--brand-accent-glow);
  border-left: 3px solid var(--brand-accent);
  border-radius: 4px;
  padding: 10px 14px;
  margin-top: 8px;
  line-height: 1.5;
}
.litl-order-form .field-note-wide { margin: 4px 0 16px; }
.litl-order-form .field-note-wide strong { display: block; margin-bottom: 2px; color: var(--brand-text); }
.litl-order-form .submit-note { font-size: 11px; color: var(--brand-text-dim); flex: 1; }

/* ═══════════════════════════════════════════════════════
   PAGES DE DOCUMENT (CGV, mentions légales, confidentialité)
   ═══════════════════════════════════════════════════════ */
.document { padding: 60px 32px 100px; background: var(--brand-primary); }
/* Même gouttière que .page-header-inner : le texte s'aligne sur le titre H1.
   La colonne de lecture reste à 820px pour le confort de lecture. */
.document-inner { max-width: 1280px; margin: 0 auto; }
.document-inner > * { max-width: 820px; }
.litl-cgv-body { color: var(--brand-text); line-height: 1.75; font-size: 15px; }
.litl-cgv-body h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 700;
  margin: 40px 0 14px; color: var(--brand-text);
}
.litl-cgv-body h3 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; }
.litl-cgv-body p { margin: 0 0 16px; }
.litl-cgv-body ul, .litl-cgv-body ol { margin: 0 0 16px; padding-left: 22px; }
.litl-cgv-body li { margin-bottom: 8px; }
.litl-cgv-body strong { color: var(--brand-text); }
.litl-cgv-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.litl-cgv-body th, .litl-cgv-body td { border: 1px solid var(--brand-card-border); padding: 10px 12px; text-align: left; }
.litl-cgv-body th { background: var(--brand-secondary); font-weight: 600; }
.litl-cgv-empty { color: var(--brand-text-muted); font-style: italic; }
.litl-cgv-version {
  margin-top: 48px; padding: 16px 18px;
  background: var(--brand-secondary);
  border-left: 3px solid var(--brand-accent);
  border-radius: 4px;
  font-size: 12px; color: var(--brand-text-muted); line-height: 1.6;
}
.litl-cgv-version code {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--brand-accent); font-size: 12px;
}
@media (max-width: 640px) { .document { padding: 40px 20px 70px; } }

/* ═══════════════════════════════════════════════════════
   SECTION 04b — POURQUOI LE TERMINAL  (maquette CSB du 25/09/2026)
   Couleurs uniquement par variables de marque : la section se
   recolore d'elle-même sur chaque instance.
   ⚠️ Pas d'attribut data-brand-var sur un élément qui porte un
   fond ou un espacement : la règle de nettoyage des annotations
   les remet à zéro en !important.
   ═══════════════════════════════════════════════════════ */
.why {
  padding: 100px 32px;
  border-top: 1px solid var(--brand-divider);
}
.why-inner { max-width: 1180px; margin: 0 auto; }
.why-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.why-eyebrow {
  border: 1px solid var(--brand-accent);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 22px;
}
.why-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.08;
}
.why-head h2 em { font-style: normal; color: var(--brand-accent); }
.why-intro { color: var(--brand-text-muted); font-size: 15px; line-height: 1.7; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--brand-card-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--brand-secondary);
}
.why-col { padding: 36px 32px; }
.why-col + .why-col { border-left: 1px solid var(--brand-card-border); }
.why-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 14px;
}
.why-col h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.why-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.why-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--brand-text); }
.why-col li::before {
  content: '✓';
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--brand-accent-rgb), 0.12);
  color: var(--brand-accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 36px;
}
.why-points { display: flex; flex-wrap: wrap; gap: 28px; }
.why-points .item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--brand-text-muted); }
.why-points .dot { width: 6px; height: 6px; background: var(--brand-accent); border-radius: 50%; }
.why-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
  .why { padding: 72px 20px; }
  .why-head { grid-template-columns: 1fr; gap: 18px; }
  .why-head h2 { font-size: 34px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-col + .why-col { border-left: none; border-top: 1px solid var(--brand-card-border); }
}

/* FAQ : une catégorie = un volet dépliable, questions dépliables à l'intérieur */
.faq-group { border-bottom: 1px solid var(--brand-divider); }
.faq-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
}
.faq-group > summary::-webkit-details-marker { display: none; }
.faq-group-title {
  margin: 0;
  padding: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand-text);
  transition: color .25s ease;
}
.faq-group > summary:hover .faq-group-title,
.faq-group[open] > summary .faq-group-title { color: var(--brand-accent); }
.faq-count {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brand-text-dim);
}
.faq-group > summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 4px 4px 4px;
  border-right: 2px solid var(--brand-accent);
  border-bottom: 2px solid var(--brand-accent);
  transform: rotate(45deg);
  transition: transform .25s ease, margin .25s ease;
}
.faq-group[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.faq-group > summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 6px; }
.faq-group-body {
  margin: 0 0 22px;
  padding: 0 24px;
  background: var(--brand-card);
  border: 1px solid var(--brand-card-border);
  border-radius: 12px;
  animation: litlFadeUp .35s ease both;
}
.faq-group-body .faq-item summary { font-size: 16px; padding: 18px 0; gap: 16px; }
.faq-group-body .faq-item:last-child { border-bottom: none; }
@media (max-width: 640px) {
  .faq-group > summary { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; padding: 18px 0; }
  .faq-group-title { font-size: 17px; }
  .faq-count { margin-left: 0; grid-row: 2; }
  .faq-group > summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .faq-group-body { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-group-body { animation: none !important; }
  .faq-group > summary::after { transition: none !important; }
}

/* ── Choix du téléphone avant la souscription (demande CSB du 08/10/2026) ──
   Sur la page : « J’ai un téléphone iOS » affiche le formulaire, « Android » ouvre
   la fenêtre de recontact. Sans JavaScript, le formulaire reste simplement visible. */
.litl-tel-bloc { display: none; margin-bottom: 8px; }
.litl-js .litl-tel-bloc { display: block; }
.litl-js:not(.litl-tel-ios) .litl-order-form.litl-tel-attente { display: none; }
.litl-tel-bloc .form-section-title {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--brand-text); text-transform: uppercase; letter-spacing: 1px;
}
.litl-tel-intro { margin: 0 0 16px; color: var(--brand-text-muted); font-size: 14px; line-height: 1.6; }
.litl-tel-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.litl-tel-option { position: relative; display: block; cursor: pointer; }
.litl-tel-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.litl-tel-option span {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: #fff; border: 1.5px solid var(--brand-card-border); border-radius: 12px;
  color: var(--brand-text); font-size: 15px; font-weight: 600;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.litl-tel-option span::before {
  content: ''; flex: none; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--brand-card-border); background: #fff; transition: border .2s;
}
.litl-tel-option:hover span { border-color: var(--brand-accent); }
.litl-tel-option input:checked + span { border-color: var(--brand-accent); background: var(--brand-accent-glow); }
.litl-tel-option input:checked + span::before { border: 6px solid var(--brand-accent); }
.litl-tel-option input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-accent-glow); border-color: var(--brand-accent); }

/* Fenêtre « téléphone Android » */
html.litl-tel-ouvert { overflow: hidden; }
.litl-tel {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(var(--brand-night-rgb, 13,27,42), .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.litl-tel[hidden] { display: none; }
.litl-tel.open { opacity: 1; }
.litl-tel-boite {
  position: relative; box-sizing: border-box; width: 100%; max-width: 480px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: linear-gradient(160deg, var(--brand-secondary) 0%, var(--brand-tertiary) 100%);
  border: 1px solid var(--brand-card-border); border-radius: 20px;
  padding: 40px 32px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(10px) scale(.97); transition: transform .25s ease;
}
.litl-tel.open .litl-tel-boite { transform: none; }
.litl-tel-fermer {
  position: absolute; top: 10px; right: 12px;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-family: inherit; font-size: 28px; line-height: 1; color: var(--brand-text-muted);
  transition: color .2s, background .2s;
}
.litl-tel-fermer:hover, .litl-tel-fermer:focus-visible { color: var(--brand-text); background: var(--brand-accent-glow); }
.litl-tel h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.5px;
  color: var(--brand-text); margin: 0 0 8px;
}
.litl-tel-dispo { margin: 0 0 16px; padding-right: 36px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--brand-text); }
.litl-tel-case { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--brand-text); }
.litl-tel-case input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand-accent); }
.litl-tel-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.litl-tel-grille .litl-tel-large { grid-column: 1 / -1; }
.litl-tel-grille label {
  display: block; margin-bottom: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--brand-text-muted);
}
.litl-tel-grille input {
  box-sizing: border-box; width: 100%; padding: 11px 13px;
  background: #fff; border: 1px solid var(--brand-card-border); border-radius: 6px;
  color: var(--brand-text); font-family: inherit; font-size: 14px;
}
.litl-tel-grille input:focus { outline: none; border-color: var(--brand-accent); }
.litl-tel-note { margin: 12px 0 18px; font-size: 12px; line-height: 1.5; color: var(--brand-text-muted); }
.litl-tel-note a { color: inherit; text-decoration: underline; }
.litl-tel-erreur {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: rgba(220,38,38,.07); border: 1px solid rgba(220,38,38,.35); color: #b91c1c;
}
.litl-tel-valider { width: 100%; padding: 15px 22px; }
.litl-tel-valider:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.litl-tel-merci { text-align: center; outline: none; }
.litl-tel-merci p { color: var(--brand-text-muted); font-size: 15px; line-height: 1.6; margin: 0 0 22px; }
.litl-tel-merci .btn-primary { display: inline-block; text-decoration: none; padding: 14px 24px; }
@media (max-width: 640px) {
  .litl-tel-choix { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .litl-tel-boite { padding: 36px 20px 24px; border-radius: 16px; }
  .litl-tel h2 { font-size: 22px; }
  .litl-tel-grille { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .litl-tel, .litl-tel-boite { transition: none; }
}

/* Sections hors formulaire (souscription pas encore ouverte, choix de l’établissement) :
   même mise en page que celles du formulaire. Elles s’affichaient sur une seule ligne. */
.order-form-card > .form-section { display: block; }
.order-form-card > .form-section .form-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.order-form-card .form-section-title .num {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: 1.5px;
  color: var(--brand-accent); background: rgba(var(--brand-accent-rgb),0.1);
  border: 1px solid rgba(var(--brand-accent-rgb),0.3); border-radius: 3px; padding: 2px 6px; text-transform: none;
}

/* ── Paiement EpayNC : formulaire intégré, aux couleurs de l’établissement ──
   Le script EpayNC pose sur <html> un thème tiré de la couleur de la boutique
   (vert clair, la même pour toutes les banques) et fixe en « inline » la couleur
   du texte du bouton (vert foncé, illisible sur nos fonds). On redéfinit ce thème
   au plus près du formulaire et on force le texte du bouton en blanc. Sélecteurs
   renforcés : la feuille « classic » d’EpayNC est chargée après celle-ci. */
.litl-epaync {
  margin: 6px 0 4px;
  --kr-global-color-primary: var(--brand-accent);
  --kr-global-color-primaryLight: rgba(var(--brand-accent-rgb), .06);
  --kr-global-color-primaryDisabled: rgba(var(--brand-accent-rgb), .38);
  --kr-form-button-color: #fff;
  --kr-form-button-backgroundColor: var(--brand-accent);
  --kr-form-button-borderColor: var(--brand-accent);
  --kr-form-button-disabled-backgroundColor: rgba(var(--brand-accent-rgb), .38);
  --kr-form-button-disabled-borderColor: transparent;
  --kr-form-checkbox-backgroundColor: var(--brand-accent);
  --kr-form-checkbox-light-backgroundColor: rgba(var(--brand-accent-rgb), .12);
  --kr-form-checkbox-focus-borderColor: rgba(var(--brand-accent-rgb), .35);
  --kr-form-smartButton-button-\$hover-border: 1px solid var(--brand-accent);
  --kr-form-smartform-embedded-button-\$hover-border: 1px solid var(--brand-accent);
  --kr-form-smartform-embedded-header-borderBottom: 1px solid var(--brand-accent);
  --kr-form-smartform-embedded-header-amount-figure-color: var(--brand-accent);
}
.litl-epaync .kr-smart-form { max-width: 100%; }
/* Champs arrondis comme ceux du formulaire de commande (couleurs de focus/erreur laissées à EpayNC). */
.litl-epaync .kr-smart-form .kr-field-wrapper { border-radius: 6px; overflow: hidden; }
.litl-epaync .kr-smart-form .kr-payment-button {
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  color: #fff !important;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.litl-epaync .kr-smart-form .kr-payment-button span {
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.litl-epaync .kr-smart-form .kr-payment-button:not(:disabled):not(.kr-loading):hover {
  background-color: var(--brand-accent-dark) !important;
  box-shadow: 0 10px 24px var(--brand-accent-glow);
  transform: translateY(-1px);
}
.litl-epaync .kr-smart-form .kr-payment-button .kr-spinner > div { background-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .litl-epaync .kr-smart-form .kr-payment-button:not(:disabled):hover { transform: none; }
}

/* Page de retour de paiement : lignes « → » comme dans les encarts d’information */
.litl-retour-paiement .form-section .info-row { display: flex; gap: 10px; padding: 4px 0; line-height: 1.5; }
.litl-retour-paiement .form-section .info-row .icon { color: var(--brand-accent); flex-shrink: 0; font-weight: 700; }