/* =========================================================================
   Portail Entreprises — SNCF Voyageurs
   Design system inspiré de la charte officielle SNCF Voyageurs
   ========================================================================= */

:root {
  /* ---- Palette officielle SNCF Voyageurs (noms des tokens du design system) ---- */
  --green-jasper:    #002b28;  /* tertiary */
  --green-pine:      #065654;  /* default — fond du header */
  --green-grape:     #bbffbe;  /* primary — boutons */
  --green-opaline:   #f1fcf0;  /* secondary — fonds très clairs */
  --green-primavera: #34e88e;  /* vert vif */
  --red-raspberry:   #cd0037;  /* rouge SNCF */
  --ocher-rocky:     #ffd2a9;  /* error */

  /* ---- Correspondances utilisées dans la maquette ---- */
  --green-900: var(--green-jasper);    /* nav très foncé */
  --green-800: var(--green-pine);      /* header / fond sombre */
  --green-700: #044240;                /* dérivé : entre pine et jasper */
  --green-600: #0a706d;                /* dérivé : survol */
  --mint-500:  var(--green-primavera); /* accent vif */
  --mint-400:  var(--green-grape);     /* boutons clairs */
  --mint-300:  #d8ffda;                /* dérivé */
  --mint-100:  var(--green-opaline);   /* fond clair */
  --mint-50:   #f8fdf7;                /* dérivé */

  --ink:       var(--green-jasper);    /* texte foncé */
  /* Texte secondaire : le même noir que le texte principal, plus lisible
     que l'ancien gris. Le gris (--ink-muted) ne sert plus qu'à ce qui doit
     paraître en retrait : fonctions d'une autre offre, mentions
     « Démonstration », flèches. */
  --ink-soft:  var(--ink);
  --ink-muted: #44635f;
  --line:      #d3e9d1;                /* bordures claires */
  --white:     #ffffff;

  --sncf-red:  var(--red-raspberry);   /* rouge du logo SNCF */

  /* Hauteur du header — spec officielle : 56px mobile / 70px desktop */
  --header-h: 70px;

  /* Rayons relevés sur le site officiel : 6px (petits éléments), 8px (boutons) */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 16px;
  --shadow:    0 10px 30px rgba(5, 44, 37, 0.10);
  --shadow-lg: 0 24px 60px rgba(5, 44, 37, 0.18);

  /* Même stratégie que le site officiel : Avenir en premier (préinstallée sur macOS),
     Poppins en repli web pour les autres systèmes. */
  --font: "Avenir Next", "AvenirNext", "Avenir", "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  /* Titre de la page d'accueil : Avenir LT Std 65 Medium quand elle est
     installée sur la machine, sinon la coupe Medium d'Avenir, présente
     d'origine sur macOS — même dessin, même graisse. */
  --font-titre: "Avenir LT Std 65 Medium", "AvenirLTStd-Medium",
                "Avenir Next", "Avenir", "Poppins", system-ui, -apple-system, sans-serif;
  --maxw: 1200px;
}

/* Header plus compact en mobile, comme sur le site officiel */
@media (max-width: 767px) {
  :root { --header-h: 56px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* Respecte la préférence système : sans cette règle, le « smooth »
   ci-dessus l'emporte sur toute demande de défilement instantané. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--mint-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Titres façon SNCF (italique gras) */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }
.display {
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.4rem);
}
.section-title {
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-align: center;
  color: var(--ink);
}
.section-lead {
  text-align: center;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 12px auto 0;
}

/* =========================== Boutons ============================ */
/* Spec officielle : rayon 8px, hauteur 40px, padding 0 16px, graisse 800 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--mint-400); color: var(--green-900); }
/* Ombre teintée de la couleur du bouton, signature du design system */
.btn-primary:hover { background: var(--mint-500); box-shadow: 0 4px 16px rgba(52, 232, 142, .25); }
.btn-white { background: var(--white); color: var(--green-800); box-shadow: var(--shadow); }
.btn-white:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-outline { background: transparent; color: var(--green-800); border-color: var(--green-800); }
.btn-outline:hover { background: var(--green-800); color: var(--white); }
.btn-block { width: 100%; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 1.05rem; }

/* =========================== Header ============================= */
.site-header {
  background: var(--green-800);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo {
  background: var(--white);
  border-radius: 10px;
  padding: 6px 9px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.brand-logo .sncf {
  font-weight: 900;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sncf-red);
  letter-spacing: -.03em;
  line-height: 1;
}
.brand-logo .vy {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink);
  text-align: center;
}
.brand-svg { height: 34px; display: block; }
.brand-text { display: none; font-weight: 700; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.nav-links a {
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  transition: background .2s, color .2s;
}
.nav-links a:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-links a.active { color: var(--mint-400); }

.nav-links a.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mint-400);
  color: var(--green-900);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(52, 232, 142, .25);
}
.nav-links a.nav-account:hover { background: var(--mint-500); color: var(--green-900); }
.nav-links a.nav-account.active { color: var(--green-900); }
.nav-account:hover { transform: translateY(-2px); transition: transform .15s; }
.nav-account .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-800); color: #fff;
  display: grid; place-items: center; font-size: .85rem;
}

.nav-toggle {
  display: none;
  background: transparent; border: 0; color: #fff;
  font-size: 1.6rem; cursor: pointer;
}

/* =========================== Hero ============================== */
.hero {
  background: var(--green-800);
  color: var(--white);
  padding: 20px 0 0;
}
.hero-inner { padding-bottom: 48px; }
.hero h1 { color: var(--mint-500); }
.hero .sub {
  color: var(--mint-300);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 500;
  margin-top: 6px;
}
.hero-media {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 18px;
  margin-top: 34px;
}
.hero-media .frame {
  height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.hero-media .frame img { width: 100%; height: 100%; object-fit: cover; }
/* Hero à une seule image */
.hero-media.single { grid-template-columns: 1fr; }
.hero-media.single .frame { height: 420px; }
.hero-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  transform: translateY(50%);
  position: relative;
  z-index: 2;
}
.hero-actions .btn { min-width: 240px; }
.hero-actions-spacer { height: 44px; background: var(--mint-50); }

/* =========================== Sections ========================== */
section { padding: 72px 0; }
.section-tight { padding: 48px 0; }

/* Cartes offres */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card .thumb { height: 170px; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card .body h3 { color: var(--green-700); font-weight: 800; }
.card .body p { color: var(--ink-soft); font-size: .95rem; }
/* Style de base : ces liens servent aussi dans les tableaux et les panneaux */
.card-link {
  color: var(--green-700); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.card-link:hover { text-decoration: underline; }
.card .body .card-link { margin-top: auto; }
.card .body .card-link:hover { gap: 12px; text-decoration: none; transition: gap .2s; }

/* Feature icônes */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 44px;
}
.feature { text-align: center; padding: 10px; }
.feature .ic {
  width: 68px; height: 68px; margin: 0 auto 16px;
  border-radius: 20px;
  background: var(--mint-100);
  color: var(--green-700);
  display: grid; place-items: center;
  font-size: 1.7rem;
}
.feature h3 { font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; }
.feature p { color: var(--ink-soft); font-size: .95rem; }

/* Bandeau menthe */
.band {
  background: var(--mint-100);
}
.band-dark {
  background: var(--green-800);
  color: var(--white);
}
.band-dark .section-title, .band-dark .section-lead { color: #fff; }
.band-dark .section-lead { color: var(--mint-300); }

/* Toggle segment */
.segment {
  display: inline-flex;
  background: var(--green-800);
  border-radius: 999px;
  padding: 5px;
  margin: 22px auto 0;
}
.segment button {
  border: 0; background: transparent; color: #fff;
  font-family: inherit; font-weight: 700; cursor: pointer;
  padding: 10px 26px; border-radius: 999px;
}
.segment button.active { background: var(--mint-400); color: var(--green-900); }

/* =========================== Widget recherche ================== */
.search-widget {
  background: var(--green-700);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-lg);
}
.search-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
}
.search-tabs button {
  border: 0; background: transparent; color: rgba(255,255,255,.85);
  font-family: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.search-tabs button.active { border: 2px solid var(--mint-400); color: #fff; }
.search-row {
  display: grid;
  grid-template-columns: 2fr auto 1fr auto;
  gap: 14px;
  align-items: stretch;
}
.search-field {
  background: transparent;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 12px 18px;
  color: #fff;
  display: flex; align-items: center; gap: 12px;
}
.search-field.two { display: grid; grid-template-columns: 1fr auto 1fr; }
.search-field label { font-size: .72rem; color: var(--mint-300); text-transform: uppercase; letter-spacing: .05em; display: block; }
.search-field input, .search-field select {
  background: transparent; border: 0; color: #fff; font-family: inherit;
  font-size: 1rem; font-weight: 600; width: 100%; outline: none;
}
.search-field input::placeholder { color: rgba(255,255,255,.6); }
.search-field select option { color: #000; }
.swap {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--mint-400); background: transparent; color: var(--mint-400);
  align-self: center; cursor: pointer; font-size: 1.1rem;
  display: grid; place-items: center;
}

/* =========================== Espace interne =================== */
/* Le fond vert de la colonne vient de .app-shell : le menu, lui, reste
   à l'écran pendant qu'on fait défiler la page (sous l'en-tête, lui
   aussi fixe). Trop long pour un petit écran, il défile seul. */
.app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - var(--header-h)); background: var(--green-800); }
.sidebar {
  background: var(--green-800);
  color: #fff;
  padding: 30px 18px;
  position: sticky; top: var(--header-h); align-self: start;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sidebar .who {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: rgba(255,255,255,.08);
  border-radius: 14px; margin-bottom: 22px;
}
.sidebar .who .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--mint-400); color: var(--green-900);
  display: grid; place-items: center; font-weight: 800;
}
.sidebar .who small { color: var(--mint-300); display: block; }
.side-nav { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  color: rgba(255,255,255,.85); font-weight: 600;
}
.side-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.side-nav a.active { background: var(--mint-400); color: var(--green-900); }
.side-nav .ic { width: 22px; display: inline-flex; align-items: center; justify-content: center; }
.side-nav .ic svg { width: 19px; height: 19px; }
.sidebar .side-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }

/* min-width:0 : sans cela, la colonne de contenu ne peut pas se
   rétrécir sous la largeur de son plus large tableau et pousse toute
   la page vers la droite. Concerne les 10 pages de l'espace. */
.app-main { padding: 34px 40px; background: var(--mint-50); min-width: 0; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.app-head h1 { font-size: 1.9rem; font-weight: 800; }
.app-head p { color: var(--ink-soft); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.stat .k { font-size: 2rem; font-weight: 800; color: var(--green-700); }
.stat .l { color: var(--ink-soft); font-size: .9rem; }
.stat .trend { font-size: .82rem; font-weight: 700; }
.stat .up { color: #1a9d5a; }

/* Panels */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px; margin-top: 24px;
}
.panel h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.panel .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.table tbody tr:hover { background: var(--mint-50); }
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
}
.badge-green { background: var(--mint-100); color: var(--green-700); }
.badge-amber { background: #fff3d6; color: #a67400; }
.badge-red { background: #ffe1e7; color: var(--sncf-red); }

/* =========================== Résultats trains ================= */
.trip-result {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin-bottom: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.trip-times { display: flex; align-items: center; gap: 22px; }
.trip-times .t { font-size: 1.6rem; font-weight: 800; }
.trip-times .g { color: var(--ink-soft); font-size: .85rem; }
.trip-line { flex: 1; min-width: 90px; text-align: center; color: var(--ink-soft); }
.trip-line .bar { height: 2px; background: var(--line); position: relative; margin: 8px 0; }
.trip-line .bar::after { content: "🚄"; position: absolute; right: -4px; top: -10px; }
.trip-meta { display: flex; gap: 18px; margin-top: 8px; color: var(--ink-soft); font-size: .85rem; flex-wrap: wrap; }
.trip-buy { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.trip-buy .price { font-size: 1.7rem; font-weight: 800; color: var(--green-700); }
.trip-buy .price small { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }

/* =========================== Formulaires ====================== */
.form-card {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 40px;
  max-width: 480px; margin: 0 auto;
}
.form-card.wide { max-width: 760px; }
@media (max-width: 560px) {
  .form-card { padding: 26px 18px; }
}
/* Une colonne de grille ne doit jamais s'élargir au-delà de l'écran
   à cause d'un contenu long (adresse e-mail, tableau…). */
.summary-grid > * { min-width: 0; }
.form-card h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: 6px; }
.form-card .muted { color: var(--ink-soft); margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem;
  padding: 13px 16px; border: 2px solid var(--line); border-radius: 12px;
  background: #fff; outline: none; transition: border .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mint-500); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-between { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; margin: 4px 0 22px; }
.form-row-between a { color: var(--green-700); font-weight: 600; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--ink-soft); }
.divider { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); margin: 22px 0; font-size: .85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-split {
  min-height: calc(100vh - var(--header-h));
  display: grid; grid-template-columns: 1fr 1fr;
}
.auth-visual {
  background: var(--green-800); color: #fff;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px;
}
.auth-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(10,66,58,.85), rgba(10,66,58,.4)), url('../img/phototgvinoui.jpg') center/cover;
  z-index: 0;
}
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual h2 { font-size: 2rem; font-weight: 800; font-style: italic; margin-bottom: 14px; }
.auth-visual p { color: var(--mint-300); max-width: 380px; }
.auth-visual ul { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.auth-visual li { display: flex; align-items: center; gap: 12px; }
.auth-visual li .ck { color: var(--mint-400); font-weight: 800; }
.auth-form-wrap { display: grid; place-items: center; padding: 50px 24px; background: var(--mint-50); }

/* Stepper */
.stepper { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0 auto 30px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--line); color: #fff; display: grid; place-items: center; font-weight: 700; }
.step.done .n, .step.active .n { background: var(--mint-500); color: var(--green-900); }
.step.active span { color: var(--ink); font-weight: 700; }
.step-sep { width: 34px; height: 2px; background: var(--line); }

/* Récap */
.summary-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.summary-line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.summary-line > :last-child { white-space: nowrap; text-align: right; }
.summary-total { display: flex; justify-content: space-between; font-size: 1.3rem; font-weight: 800; padding-top: 14px; color: var(--green-700); }

/* =========================== Footer =========================== */
.site-footer {
  background: var(--green-900);
  color: rgba(255,255,255,.8);
  padding: 56px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 34px;
}
.footer-grid h4 { color: #fff; margin-bottom: 14px; font-size: 1rem; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-grid a:hover { color: var(--mint-400); }
.footer-brand p { max-width: 300px; margin-top: 14px; font-size: .92rem; }
/* Barre de liens légaux (pieds de page allégés) */
.footer-links ul {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; padding-bottom: 20px; font-size: .9rem;
}
.footer-links a:hover { color: var(--mint-400); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 40px; padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .85rem;
}

/* Floating aide */
/* Spec officielle : carré arrondi 72px, rayon 6px, ombre teintée */
.fab {
  position: fixed; right: 26px; bottom: 26px;
  width: 72px; height: 72px; border-radius: var(--radius-sm);
  background: var(--mint-500); color: var(--green-900);
  display: grid; place-items: center; font-size: 1.7rem;
  box-shadow: 0 4px 16px rgba(52, 232, 142, .25); cursor: pointer; z-index: 90;
  border: 0; transition: transform .15s ease, box-shadow .2s ease;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(52, 232, 142, .35); }

/* =========================== Composants additionnels ========== */
/* Cellule collaborateur dans les tables */
.who-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.avatar-sm {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mint-100); color: var(--green-700);
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  flex-shrink: 0;
}
.badge-neutral { background: #eef2f0; color: var(--ink-soft); }

/* Histogramme (bilan carbone) */
.chart {
  display: flex; align-items: flex-end; gap: 14px;
  height: 240px; padding-top: 10px;
}
.chart .bar-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%;
}
.chart .bar {
  width: 100%; max-width: 56px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--mint-400), var(--mint-500));
  transition: height .3s ease;
}
.chart .bar-live { background: linear-gradient(180deg, var(--mint-500), var(--green-600)); }
.chart .bar-val { font-size: .78rem; font-weight: 700; color: var(--green-700); margin-top: 8px; }
.chart .bar-lab { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }

/* Jauges (répartition par mode) */
.meter { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.meter-lab { width: 96px; font-weight: 600; font-size: .9rem; }
.meter-track { flex: 1; height: 12px; border-radius: 999px; background: var(--mint-50); border: 1px solid var(--line); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--mint-500); }
.meter-fill.amber { background: #f2b53c; }
.meter-fill.red { background: var(--sncf-red); }
.meter-val { width: 44px; text-align: right; font-weight: 700; font-size: .9rem; color: var(--ink-soft); }

/* FAQ (accordéon) */
.faq { max-width: 780px; margin: 34px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 4px 22px; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; font-weight: 700; color: var(--ink);
  padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--green-700); font-size: 1.5rem; font-weight: 700; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--ink-soft); font-size: .95rem; padding-bottom: 18px; }

/* =========================================================================
   THÈME SOMBRE DES PAGES VITRINE
   Le site officiel sncf-voyageurs.com est sombre : fond vert profond,
   titres en vert clair, cartes sans fond blanc.
   L'espace connecté reste clair (comme le vrai Portail Entreprises).
   ========================================================================= */
/* Fond vert très pâle (green_opaline), comme le site officiel en mode clair */
body.public { background: var(--green-opaline); color: var(--ink); }

/* Le hero et l'appel à l'action restent en vert foncé, comme l'en-tête */
body.public .hero { background: var(--green-pine); }
body.public .appcta { background: var(--green-pine); }
/* Fond uniforme : le site officiel n'alterne pas les bandes en clair */
body.public .band { background: var(--green-opaline); }
body.public .hero-actions-spacer { background: var(--green-opaline); }

/* Titres et textes */
body.public .display { color: var(--green-grape); }
body.public .hero .sub { color: rgba(255,255,255,.85); }
body.public .section-title { color: var(--green-jasper); }
body.public .section-lead { color: var(--ink-soft); }

/* Points forts */
body.public .point h3 { color: var(--green-pine); }
body.public .point p { color: var(--ink-soft); }

/* Cartes : image arrondie, texte posé dessous, sans panneau blanc ni ombre */
body.public .cards .card,
body.public .card {
  background: transparent; border: 0; overflow: visible;
  box-shadow: none !important;
}
body.public .card:hover { transform: translateY(-4px); box-shadow: none !important; }
body.public .card .thumb { border-radius: 14px; overflow: hidden; }
body.public .card .body { padding: 16px 2px 0; }
body.public .card .body h3 { color: var(--green-pine); }
body.public .card .body p { color: var(--ink-soft); }
body.public .card .body .card-link { color: var(--green-pine); font-weight: 700; }

/* FAQ sur fond clair */
body.public .faq-item { background: #fff; border-color: var(--line); }

/* Bouton compte : pastille blanche, comme « Mes billets » sur le site officiel */
.nav-links a.nav-account {
  background: #fff; color: var(--green-900);
  border-radius: 999px; box-shadow: none;
}
.nav-links a.nav-account:hover { background: var(--green-grape); color: var(--green-900); }
.nav-account .avatar { background: var(--green-900); color: #fff; }

/* Bouton « retour en haut », vert vif et rond comme sur le site officiel */
.to-top {
  position: fixed; right: 30px; bottom: 112px;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--green-primavera); color: var(--green-900);
  display: none; place-items: center; cursor: pointer; z-index: 89;
  box-shadow: 0 4px 16px rgba(52, 232, 142, .25);
  font-size: 1.5rem; transition: transform .15s ease;
}
.to-top.show { display: grid; }
.to-top:hover { transform: translateY(-2px); }

/* =========================== Message de démonstration ========= */
/* Retour visuel sur les actions non implémentées (téléchargements, envois…)
   plutôt qu'un clic sans effet. */
.toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(18px);
  background: var(--green-jasper); color: #fff;
  padding: 14px 22px; border-radius: var(--radius);
  font-size: .92rem; font-weight: 600; line-height: 1.35;
  box-shadow: var(--shadow-lg); z-index: 200;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 40px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .mi { color: var(--green-grape); flex-shrink: 0; }

/* Utils */
/* L'attribut hidden doit primer sur les display: grid/flex des composants */
[hidden] { display: none !important; }
.text-center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.hide { display: none !important; }

/* =========================== Responsive ======================= */
@media (max-width: 900px) {
  .brand-text { display: none; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--green-800); flex-direction: column; align-items: stretch;
    padding: 16px 24px; gap: 4px; display: none;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; }
  .hero-media { grid-template-columns: 1fr; }
  .hero-media .frame { height: 220px; }
  .hero-media:not(.single) .frame:first-child { display: none; }
  .hero-media.single .frame { height: 240px; }
  .search-row { grid-template-columns: 1fr; }
  .swap { transform: rotate(90deg); }
  .app-shell { grid-template-columns: 1fr; background: var(--mint-50); }
  .sidebar { display: none; }
  .app-main { padding: 24px 18px; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .summary-grid { grid-template-columns: 1fr; }
  .trip-result { grid-template-columns: 1fr; }
  .trip-buy { text-align: left; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { min-width: 100%; }
}

/* =========================== Popup d'accueil (démo) =========== */
.intro-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 20px;
  background: rgba(5, 44, 37, 0.55);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: introFade .25s ease;
}
.intro-card {
  position: relative;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 460px; width: 100%;
  padding: 40px 34px 34px; text-align: center;
  animation: introPop .32s cubic-bezier(.2,.8,.25,1);
}
.intro-badge {
  display: inline-block; margin-bottom: 18px;
  background: var(--mint-100); color: var(--green-700);
  padding: 6px 16px; border-radius: 999px;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.intro-photo {
  width: 116px; height: 116px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 20px; display: block;
  border: 4px solid var(--mint-400);
  box-shadow: 0 10px 26px rgba(5,44,37,.22);
}
.intro-photo.is-fallback {
  display: grid; place-items: center;
  background: var(--mint-100); color: var(--green-700); font-size: 2.6rem;
}
.intro-card h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }
.intro-card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 12px; }
.intro-card .intro-fine { font-size: .82rem; color: var(--ink-soft); opacity: .85; margin-bottom: 24px; }
.intro-card .btn { width: 100%; }
.intro-sign {
  margin-top: 18px; margin-bottom: 0;
  font-weight: 800; font-style: italic; color: var(--green-700);
}
.intro-x {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--mint-50); color: var(--ink-soft);
  font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.intro-x:hover { background: var(--mint-100); }
body.intro-open { overflow: hidden; }
@keyframes introFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes introPop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* =========================== Icônes (masques SVG) ============= */
.mi {
  display: inline-block; width: 20px; height: 20px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.mi-dashboard { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.mi-train { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='12' rx='3'/%3E%3Cpath d='M5 11h14'/%3E%3Cpath d='M8 16l-2 4'/%3E%3Cpath d='M16 16l2 4'/%3E%3Cpath d='M9 8h6'/%3E%3C/svg%3E"); }
.mi-ticket { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H6a2 2 0 0 1-2-2 2 2 0 0 0 0-4z'/%3E%3Cpath d='M14 7v10'/%3E%3C/svg%3E"); }
.mi-users { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.mi-invoice { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E"); }
.mi-moon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a7 7 0 1 0 10.5 10.5z'/%3E%3C/svg%3E"); }
.mi-bolt { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.mi-search { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
.mi-leaf { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V11'/%3E%3Cpath d='M12 11C12 7 9 4 4 4c0 4 3 7 8 7z'/%3E%3Cpath d='M12 11c0-3 3-6 8-6 0 3-3 6-8 6z'/%3E%3C/svg%3E"); }
.mi-admin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.mi-logout { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
.mi-sliders { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M1 14h6'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M17 16h6'/%3E%3C/svg%3E"); }
.mi-card { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.mi-edit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.mi-chart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 14l4-4 3 3 5-6'/%3E%3C/svg%3E"); }
.mi-euro { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7a7 7 0 1 0 0 10'/%3E%3Cpath d='M5 10h9'/%3E%3Cpath d='M5 14h7'/%3E%3C/svg%3E"); }
.mi-support { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 14h3v5H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M20 14h-3v5h2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }

.mi-info { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.mi-user { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a7 7 0 0 1 7-7h2a7 7 0 0 1 7 7v1'/%3E%3C/svg%3E"); }
.mi-phone { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 5.5 5.5L16 12l4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4 6.2 2 2 0 0 1 6.5 3z'/%3E%3C/svg%3E"); }
.mi-mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.mi-download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E"); }
.mi-upload { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E"); }
.mi-plane { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
.mi-plug { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6'/%3E%3Cpath d='M15 2v6'/%3E%3Cpath d='M6 8h12v3a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E"); }
.mi-wifi { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.8a16 16 0 0 1 20 0'/%3E%3Cpath d='M5 12.5a11 11 0 0 1 14 0'/%3E%3Cpath d='M8.5 16.2a6 6 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3C/svg%3E"); }
.mi-coffee { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M17 9h2a3 3 0 0 1 0 6h-2'/%3E%3Cpath d='M7 2v3'/%3E%3Cpath d='M11 2v3'/%3E%3C/svg%3E"); }
.mi-briefcase { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M2 13h20'/%3E%3C/svg%3E"); }
.mi-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.mi-close { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.mi-star { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.mi-arrow-left { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E"); }
.mi-arrow-right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
.mi-pin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.mi-swap { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13l-4-4'/%3E%3Cpath d='M20 15H7l4 4'/%3E%3C/svg%3E"); }
.mi-trash { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3C/svg%3E"); }
.mi-plus { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.mi-lock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.mi-bell { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.mi-calendar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3C/svg%3E"); }
.mi-clock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.mi-chevron { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E"); }

.mi-car { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15l1.4-5.6A2 2 0 0 1 8.4 8h7.2a2 2 0 0 1 1.9 1.4L19 15'/%3E%3Crect x='3' y='15' width='18' height='4' rx='1.5'/%3E%3Ccircle cx='7.5' cy='19.5' r='1.5'/%3E%3Ccircle cx='16.5' cy='19.5' r='1.5'/%3E%3C/svg%3E"); }
.mi-walk { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4' r='2'/%3E%3Cpath d='M11 21l2-6-3-3 1-5 3 3 3 1'/%3E%3Cpath d='M8.5 21l2.5-5'/%3E%3C/svg%3E"); }
.mi-bike { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='17' r='3.5'/%3E%3Ccircle cx='18' cy='17' r='3.5'/%3E%3Cpath d='M6 17l4-8h5l3 8'/%3E%3Cpath d='M9.5 9h4'/%3E%3C/svg%3E"); }

/* Icônes dans la sidebar */
.side-nav .mi { width: 20px; height: 20px; }

/* Icône posée dans une ligne de texte : taille relative + alignement */
.mi-inline { width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* Conteneurs récurrents « icône + libellé » */
.trip-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.trip-meta > span .mi { width: 16px; height: 16px; }
.meter-lab { display: inline-flex; align-items: center; gap: 8px; }
.meter-lab .mi { width: 17px; height: 17px; }
.card-detail li .mi { color: var(--green-primavera); }
.stat .trend { display: inline-flex; align-items: center; gap: 6px; }
.stat .trend .mi { width: 15px; height: 15px; }
.auth-visual li .mi { color: var(--mint-400); width: 18px; height: 18px; flex-shrink: 0; }
.fab .mi { width: 30px; height: 30px; }
.nav-account .avatar .mi { width: 15px; height: 15px; }

/* =========================== Voyage porte-à-porte ============= */
.vision-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-jasper); color: var(--green-grape);
  padding: 6px 14px; border-radius: var(--radius);
  font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}

/* Frise verticale du trajet */
.journey { position: relative; margin-top: 6px; }
.leg { position: relative; padding-left: 58px; padding-bottom: 22px; }
.leg:last-child { padding-bottom: 0; }
.leg::before {
  content: ""; position: absolute; left: 19px; top: 40px; bottom: 0;
  width: 2px; background: var(--line);
}
.leg:last-child::before { display: none; }
.leg-dot {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--mint-100); color: var(--green-700);
}
.leg-dot.is-av { background: var(--green-jasper); color: var(--green-grape); }
.leg-dot.is-train { background: var(--green-pine); color: #fff; }
.leg-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.leg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.leg-head strong { font-size: 1.02rem; }
.leg-time { font-weight: 800; color: var(--green-700); white-space: nowrap; }
.leg-path { color: var(--ink-soft); font-size: .92rem; margin-top: 4px; }
.leg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.leg-tag {
  font-size: .76rem; font-weight: 700; color: var(--ink-soft);
  background: var(--mint-50); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px;
}

/* Choix du mode premier / dernier kilomètre */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.mode-card {
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; background: #fff;
  transition: border-color .15s, background .15s;
}
.mode-card:hover { border-color: var(--mint-500); }
.mode-card.selected { border-color: var(--green-pine); background: var(--mint-50); }
.mode-card .mode-top { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.mode-card .mode-top .mi { color: var(--green-700); }
.mode-card .mode-sub { color: var(--ink-soft); font-size: .84rem; margin-top: 6px; }
.mode-card .mode-price { font-weight: 800; color: var(--green-700); margin-top: 8px; }

/* Suivi du véhicule en temps réel */
.av-live {
  background: var(--green-jasper); color: #fff;
  border-radius: var(--radius); padding: 20px 22px;
}
.av-live h3 { color: var(--green-grape); font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.av-live .av-sub { color: rgba(255,255,255,.75); font-size: .88rem; }
.av-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin-top: 18px; }
.av-stats div span { display: block; color: rgba(255,255,255,.6); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.av-stats div strong { font-size: 1.1rem; color: #fff; }
.pulse {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green-primavera); margin-right: 8px;
  box-shadow: 0 0 0 0 rgba(52,232,142,.7); animation: pulse 1.8s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 12px rgba(52,232,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,232,142,0); }
}

/* Comparatif porte-à-porte */
.compare-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: center;
}
.compare-row:last-child { border-bottom: 0; }
.compare-row.head { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 700; }
.compare-row .win { color: var(--green-700); font-weight: 800; }

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

/* =========================== Tunnel d'achat (espace) ========== */
.buy-tabs {
  display: inline-flex; background: var(--mint-100);
  border-radius: 999px; padding: 5px; margin-bottom: 26px;
}
.buy-tabs button {
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .98rem;
  padding: 13px 30px; border-radius: 999px; color: var(--green-800);
  transition: background .2s, color .2s;
}
.buy-tabs button.active { background: var(--green-800); color: #fff; }

/* Type de trajet */
.trip-types { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 24px; }
.trip-types label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.trip-types input[type="radio"] { width: 20px; height: 20px; accent-color: var(--green-700); cursor: pointer; }

/* Ligne de trajet */
.trip-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr 195px 165px;
  gap: 12px; align-items: center;
}
.trip-grid + .trip-grid { margin-top: 14px; }
.pill-field {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 14px 20px; min-width: 0;
}
.pill-field:focus-within { border-color: var(--mint-500); }
.pill-field .mi { color: var(--green-700); flex-shrink: 0; }
.pill-field input {
  border: 0; outline: none; background: transparent; width: 100%; min-width: 0;
  font-family: inherit; font-size: 1rem; color: var(--ink);
}
.pill-field input::placeholder { color: #8aa79b; }
.swap-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--green-800); color: #fff; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .2s;
}
.swap-btn:hover { background: var(--green-600); }

.trip-options { display: flex; align-items: center; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.trip-options .checkbox { margin: 0; align-items: center; }

/* Voyageurs */
.traveler-add { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.traveler-add .field { margin: 0; flex: 1; min-width: 240px; }

/* Bloc repliable (code / bon d'achat) */
.collapse-toggle {
  display: flex; align-items: center; gap: 14px; margin: 0 auto;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
}
.collapse-toggle .circle {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--green-800); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: transform .25s;
}
.collapse-toggle.open .circle { transform: rotate(180deg); }
.collapse-body { margin-top: 24px; }
.code-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: 14px; align-items: end;
}
.code-grid .field { margin: 0; }

/* Pastilles voyageurs (page résultats) */
.traveler-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.tchip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--mint-50); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 18px 8px 8px;
}
.tchip strong { display: block; font-size: .92rem; font-weight: 700; line-height: 1.2; }
.tchip small { display: block; font-size: .78rem; color: var(--ink-soft); }

/* Carte voyageur (récapitulatif) */
.trav-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px; background: var(--mint-50);
}
.trav-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.trav-card .field { margin-bottom: 0; }

/* Total groupe sur un résultat */
.price-total {
  font-size: .84rem; font-weight: 700; color: var(--ink-soft);
  background: var(--mint-100); border-radius: 999px;
  padding: 4px 12px; white-space: nowrap;
}

/* Détail d'une carte */
.card-detail {
  border: 2px solid var(--mint-400); border-radius: var(--radius);
  padding: 22px; margin-top: 20px; background: var(--mint-50);
}
.card-detail h3 { color: var(--green-700); font-weight: 800; margin-bottom: 6px; }
.card-detail .price { font-size: 1.6rem; font-weight: 800; color: var(--green-700); margin: 8px 0 12px; }
.card-detail ul { list-style: none; display: flex; flex-direction: column; gap: 7px; color: var(--ink-soft); font-size: .93rem; }

@media (max-width: 1100px) {
  .trip-grid { grid-template-columns: 1fr; }
  .swap-btn { transform: rotate(90deg); margin: 0 auto; }
  .code-grid { grid-template-columns: 1fr; }
}

/* Bouton icône (crayon d'édition, etc.) */
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--green-700);
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--mint-100); border-color: var(--mint-400); }
.icon-btn .mi { width: 17px; height: 17px; }

/* ==================== Offres et services associés ============= */
/* Tableau comparatif : une colonne par offre, une coche verte quand
   le service est inclus. Aucun tarif affiché — les offres payantes
   font l'objet d'un devis auprès du Centre de Contact. */
.offers {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px 14px 14px;
  margin: 44px auto 0;
  max-width: 1120px;
}
/* « position: relative » retient dans le cadre les petits textes réservés
   aux lecteurs d'écran (.sr-only, en position absolue) : sans cela, ils
   élargissaient toute la page sur téléphone, et le bouton d'aide sortait
   de l'écran. */
.offers-scroll { overflow-x: auto; position: relative; }

.offers-table {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 6px 0;
  font-size: .92rem;
}
.offers-table .oth-feat { width: 32%; }

/* ---- En-têtes de colonnes : dégradé du plus clair au plus complet ---- */
.offers-table .oth {
  width: 17%;
  vertical-align: top;
  text-align: center;
  padding: 20px 14px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.oth-name { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.oth-sub  { display: block; margin-top: 7px; font-size: .74rem; font-weight: 600; opacity: .82; }

.oth-socle      { background: var(--mint-400);     color: var(--green-700); }
.oth-expert     { background: var(--green-600);    color: var(--white); }
.oth-partenaire { background: var(--green-pine);   color: var(--white); }
.oth-privilege  { background: var(--green-jasper); color: var(--white); }

/* Colonne « tout compris » légèrement teintée pour guider l'œil */
.oc-privilege { background: var(--mint-50); }

/* ---- Intertitres de familles de services ---- */
.offers-group th {
  text-align: left;
  padding: 26px 6px 9px;
  font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--green-600);
}

/* ---- Lignes de services ---- */
.offers-table tbody th[scope="row"] {
  text-align: left; font-weight: 600;
  color: var(--ink); line-height: 1.45;
  padding: 15px 20px 15px 6px;
  border-bottom: 1px solid var(--line);
}
.offers-table tbody td {
  text-align: center;
  padding: 15px 10px;
  border-bottom: 1px solid var(--line);
}

/* Coche : la pastille et la coche forment un seul bloc centre.
   line-height:0 supprime l'interligne du texte, sinon la coche est
   posee sur la ligne de base et flotte quelques pixels trop haut. */
.offers-table td.ok,
.offers-table td.no { line-height: 0; }
.ok-badge {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--mint-400);
}
.ok-badge .mi { width: 17px; height: 17px; color: var(--green-700); }
.offers-table td.no { color: #a9c4bf; font-weight: 700; font-size: 1rem; }

.offers-table tfoot td { padding: 22px 6px 6px; vertical-align: top; }
.offers-table tfoot .btn { font-size: .84rem; }

.offers-note {
  display: flex; align-items: flex-start; gap: 9px;
  max-width: 1120px; margin: 18px auto 0;
  color: var(--ink-soft); font-size: .88rem; line-height: 1.6;
}
.offers-note .mi { color: var(--green-600); flex-shrink: 0; margin-top: 3px; }

/* Lecteurs d'écran uniquement : « Inclus » / « Non inclus » */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

@media (max-width: 860px) {
  .offers { padding: 8px 10px 10px; }
  .offers-table { font-size: .88rem; }
  .offers-table tbody th[scope="row"] { padding-right: 14px; }
}

/* =========================== Points forts (accueil) ========== */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px 40px;
  margin-top: 46px;
}
.point { display: flex; gap: 16px; align-items: flex-start; }
.point .pico {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: var(--mint-100); color: var(--green-700);
  display: grid; place-items: center;
}
.point .pico .mi { width: 26px; height: 26px; }
.point h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 3px; }
.point p { color: var(--ink-soft); font-size: .92rem; }

/* =========================== Découvrez aussi ================= */
.discover-thumb { height: 190px; display: grid; place-items: center; }
.discover-thumb .mi { width: 58px; height: 58px; color: #fff; }
.discover-thumb .tag {
  position: absolute; margin: 16px; align-self: start; justify-self: start;
  background: rgba(255,255,255,.9); color: var(--green-800);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 12px; border-radius: 999px;
}

/* =========================== Section application ============= */
.appcta { background: var(--green-800); color: #fff; }
.appcta-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
}
.appcta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; font-style: italic; }
.appcta .lead { color: var(--mint-300); margin: 14px 0 24px; max-width: 460px; }
.appcta ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.appcta li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.92); }
.appcta li .mi { width: 18px; height: 18px; color: var(--mint-400); }
.store-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.store-badges a { display: inline-block; transition: transform .15s; }
.store-badges a:hover { transform: translateY(-2px); }
.store-badges img { height: 46px; width: auto; display: block; }
.app-mock { display: grid; place-items: center; }
.app-mock img, .app-mock svg { width: 100%; max-width: 320px; }

@media (max-width: 800px) {
  .appcta-grid { grid-template-columns: 1fr; }
  .app-mock { order: -1; }
}

/* ================ Repère de navigation au clavier ============= */
/* Critère RGAA 10.7 : pour chaque élément recevant le focus, la prise
   de focus doit être visible et contrastée à 3:1 au minimum.
   Deux couleurs sont nécessaires, car aucune couleur de la charte ne
   tient les 3:1 sur les deux fonds du site à la fois — mesuré : le vert
   jaspe donne 14,48:1 sur le fond clair mais 1,79:1 sur le bandeau vert,
   et le vert grape fait exactement l'inverse.
   Pas d'ombre portée pour dessiner un double anneau : elle serait rognée
   par les blocs qui découpent leur contenu (.faq-item, .card,
   .offers-scroll, .auth-visual).
   La pseudo-classe est écrite deux fois à dessein : cela lui donne assez
   de poids pour passer devant les « outline: none » posés plus haut sur
   les champs de saisie, sans recourir à !important.
   :focus-visible ne se déclenche qu'au clavier : rien ne change à la souris. */
:focus-visible:focus-visible {
  outline: 3px solid var(--green-jasper);
  outline-offset: 2px;
}
/* Toutes les zones à fond vert foncé du site, sans exception : sur
   elles, le vert jaspe donne 1,79:1 — et 1:1 dans le pied de page, qui
   est exactement de cette couleur. Le contour y serait invisible.
   Zones recensées : bandeau du haut (15 pages), barre latérale de
   l'espace (10), bannière de haut de page (4), pied de page (5),
   encart application (1), visuel de la page de connexion (1). */
.site-header :focus-visible:focus-visible,
.sidebar :focus-visible:focus-visible,
.aide-tete :focus-visible:focus-visible,
.hero :focus-visible:focus-visible,
.appcta :focus-visible:focus-visible,
.site-footer :focus-visible:focus-visible,
.auth-visual :focus-visible:focus-visible {
  outline-color: var(--green-grape);
}

/* ============ Confirmation d'envoi (page Contact) ============= */
/* Prend la place du formulaire une fois le message envoyé. Aucune
   couleur en dur : tout vient des variables de la charte. */
.confirm-panel { text-align: center; }
.confirm-mark {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--mint-400); color: var(--green-700);
  display: grid; place-items: center;
  margin: 6px auto 20px;
}
.confirm-mark .mi { width: 32px; height: 32px; }
.confirm-recap { text-align: left; margin: 24px 0 4px; }
.demo-note {
  margin: 18px 0 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: .82rem;
  font-style: italic;
}

/* ========== Bandeau de bienvenue (tableau de bord) ============ */
/* Ne s'affiche qu'en arrivant depuis Adhérer, jamais après une simple
   connexion — les deux pages mènent pourtant au même tableau de bord. */
.welcome {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--mint-100);
  border: 1px solid var(--mint-400);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.welcome > .mi {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px;
  color: var(--green-700);
}
.welcome-txt { flex: 1; min-width: 0; }
.welcome-txt strong {
  display: block; color: var(--green-jasper);
  font-size: 1.02rem; font-weight: 800;
}
.welcome-txt p { margin: 5px 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.welcome-txt .demo-note {
  margin: 10px 0 0; padding-top: 10px;
  font-size: .8rem;
}
.welcome-close {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); padding: 5px; line-height: 0;
  border-radius: var(--radius-sm); flex-shrink: 0;
}
.welcome-close:hover { color: var(--green-jasper); }
.welcome-close .mi { width: 18px; height: 18px; }

/* Rappel de la confirmation : une adresse e-mail longue ne doit pas
   déborder de la carte sur un écran étroit. La règle générale
   .summary-line garde son « nowrap », qui reste juste pour les prix. */
.confirm-recap .summary-line > :last-child {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 520px) {
  .confirm-recap .summary-line { flex-direction: column; gap: 3px; }
  .confirm-recap .summary-line > :last-child { text-align: left; }
}

/* ============ Administration : menu vertical + contenu ======== */
/* Reprend la disposition du vrai Portail Entreprises : la liste des
   rubriques à gauche, le contenu à droite. */
.admin-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}
.admin-nav {
  display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: calc(var(--header-h) + 20px);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 10px;
}
.admin-nav button {
  display: flex; align-items: center; gap: 11px;
  border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: .95rem; font-weight: 600;
  line-height: 1.3;
  transition: background .15s, color .15s;
}
.admin-nav button .mi {
  width: 19px; height: 19px; flex-shrink: 0;
  color: var(--green-600);
}
.admin-nav button:hover { background: var(--mint-100); }
.admin-nav button.active {
  background: var(--green-pine);
  color: var(--white);
  font-weight: 800;
}
.admin-nav button.active .mi { color: var(--green-grape); }
/* Sans min-width:0, la colonne de contenu ne peut pas se rétrécir en
   dessous de la largeur de son plus large tableau, et pousse la page. */
.admin-content { min-width: 0; }
/* Les rubriques sont des <section> : elles héritaient des 72 px de
   respiration verticale prévus pour les pages publiques, ce qui les
   décalait vers le bas par rapport au menu. */
.admin-content > section { padding: 0; }
/* Le premier bloc démarre au même niveau que le menu — y compris quand
   il est enveloppé dans un formulaire (rubriques Entreprise et Mon compte). */
.admin-content > section > .panel:first-child,
.admin-content > section > form:first-child > .panel:first-child { margin-top: 0; }
/* Au changement de rubrique on remonte en haut du contenu — en tenant
   compte du bandeau fixe, sinon le titre passe dessous. */
.admin-content { scroll-margin-top: calc(var(--header-h) + 24px); }
.admin-intro { font-size: .92rem; line-height: 1.6; margin: 0 0 20px; }
.admin-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .86rem; line-height: 1.55; margin: 18px 0 0;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.admin-note .mi { color: var(--green-600); flex-shrink: 0; margin-top: 2px; }
.admin-opt { margin-top: 18px; }

/* Cartes de paiement (rubrique Carte logée) */
.pay-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.pay-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pay-card-num {
  font-size: 1.15rem; font-weight: 800; letter-spacing: .06em;
  color: var(--green-jasper); margin: 14px 0 16px;
}
.pay-card .card-link { display: inline-block; margin-top: 14px; }

/* Champs analytiques (rubrique Champs de personnalisation) */
.custom-field {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px; margin-bottom: 18px;
}
.custom-field h3 { font-size: 1rem; font-weight: 800; color: var(--green-jasper); }
.chips-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-val {
  background: var(--mint-100); color: var(--green-700);
  border-radius: 999px; padding: 7px 14px;
  font-size: .86rem; font-weight: 700;
}
.chip-add {
  border: 1px dashed var(--line); background: none; cursor: pointer;
  border-radius: 999px; padding: 7px 14px;
  font: inherit; font-size: .86rem; font-weight: 700; color: var(--ink-soft);
}
.chip-add:hover { border-color: var(--green-600); color: var(--green-700); }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; gap: 18px; }
  .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
}

/* ============ Administration : composants des rubriques ======= */
/* Champs renseignés par SNCF, non modifiables ici */
.field input:disabled, .field select:disabled {
  background-color: var(--mint-50);
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* Téléphone : pays / indicatif / numéro */
.phone-row { display: grid; grid-template-columns: 1.4fr .6fr 2fr; gap: 16px; }
.phone-row .field { margin-bottom: 0; }

/* Séries de cases à cocher */
.opt-list { display: flex; flex-direction: column; gap: 11px; margin: 18px 0; }
.radio-list { display: flex; flex-direction: column; gap: 12px; }

/* Listes dépliables (entités, divisions) */
.acc-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acc + .acc { border-top: 1px solid var(--line); }
.acc > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; cursor: pointer;
  font-weight: 700; color: var(--green-jasper);
  list-style: none;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: ""; margin-left: auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg); transition: transform .18s;
}
.acc[open] > summary::after { transform: rotate(-135deg); }
.acc > summary:hover { background: var(--mint-50); }
.acc-body { padding: 4px 18px 20px; }

/* Pastilles de code FCE, avec étoile de FCE maître */
.fce-legende { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-soft); margin: 0 0 14px; }
.fce-legende .mi { width: 17px; height: 17px; color: var(--green-600); }
.fce-list { display: flex; flex-wrap: wrap; gap: 12px; }
.fce-pill {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  border-radius: var(--radius); padding: 13px 18px;
  font: inherit; font-weight: 700; color: var(--green-jasper);
}
.fce-pill .mi { width: 19px; height: 19px; color: var(--line); }
.fce-pill:hover { border-color: var(--green-600); }
.fce-pill.is-master { border-color: var(--green-600); background: var(--mint-100); }
.fce-pill.is-master .mi, .mi-star.is-master { color: var(--green-600); }

/* Barres d'outils et de recherche */
.tool-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.search-row-admin { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

/* Titres internes des blocs de règles */
.rule-title {
  font-size: 1rem; font-weight: 800; color: var(--green-jasper);
  margin: 22px 0 4px;
}
.rule-block {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 20px 20px; margin-top: 18px;
}
.rule-block .rule-title { margin-top: 18px; }

/* Actions en fin de ligne de tableau */
.row-actions { display: flex; gap: 6px; }
.icon-btn.is-danger:hover { color: var(--red-raspberry); }

@media (max-width: 700px) {
  .phone-row, .search-row-admin { grid-template-columns: 1fr; }
}

/* Tableau plus large que son panneau : il défile dans son propre cadre,
   avec un peu de marge pour que le contour clavier ne soit pas rogné. */
.table-scroll { overflow-x: auto; padding: 6px; margin: -6px; position: relative; }

/* Sous-menu : les blocs de la rubrique ouverte, pour y aller directement */
.admin-sub {
  display: flex; flex-direction: column;
  margin: 2px 0 6px 17px;
  padding-left: 15px;
  border-left: 2px solid var(--line);
}
.admin-sub a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: .88rem; font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
  transition: background .15s, color .15s;
}
.admin-sub a:hover { background: var(--mint-100); color: var(--green-jasper); }
.admin-sub a.active { color: var(--green-700); font-weight: 800; }
.admin-sub a.active::before {
  content: ""; float: left;
  width: 3px; height: 1.15em;
  margin: 1px 0 0 -15px;
  background: var(--green-600);
  border-radius: 2px;
}

/* Chaque bloc s'arrête sous le bandeau fixe quand on saute dessus */
.admin-content .panel { scroll-margin-top: calc(var(--header-h) + 24px); }

@media (max-width: 900px) {
  /* En colonne repliée, le sous-menu se déroule sous sa rubrique */
  .admin-sub { flex-direction: row; flex-wrap: wrap; width: 100%; margin-left: 0; }
}

/* ============ Listes déroulantes : même forme que le texte ===== */
/* Sans appearance:none, le navigateur impose son propre habillage —
   double flèche et hauteur différentes selon le système. On reprend
   donc exactement la forme des champs de saisie, avec un chevron
   dessiné à droite. */
.field select,
.table select,
.pill-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344635f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select {
  background-color: #fff;
  background-position: right 15px center;
  background-size: 18px;
  padding-right: 46px;
}
.field select:disabled { cursor: not-allowed; }

/* Listes déroulantes dans les tableaux : même traitement, en plus compact */
.table select {
  font-family: inherit; font-size: .92rem;
  padding: 9px 34px 9px 12px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background-color: #fff;
  background-position: right 10px center;
  background-size: 16px;
  transition: border .2s;
}
.table select:focus { border-color: var(--mint-500); outline: none; }

/* ====== Volet en mode « Nouveau profil » ====================== */
/* Le même volet, dans un autre mode : les rubriques d'administration
   s'effacent au profit de celles du profil, avec un retour en haut. */
.admin-back {
  display: flex; align-items: center; gap: 9px;
  border: 0; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 700;
  text-align: left;
  color: var(--green-700);
  background: var(--mint-100);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-bottom: 6px;
}
.admin-back:hover { background: var(--mint-300); }
.admin-back .mi { width: 17px; height: 17px; flex-shrink: 0; }

.admin-nav-titre {
  font-size: 1.1rem; font-weight: 800;
  color: var(--green-jasper);
  padding: 8px 14px 12px;
  margin: 0;
}

/* En mode profil, les cinq rubriques d'administration disparaissent */
.admin-nav.is-profil > button[data-panel],
.admin-nav.is-profil > [data-sub]:not([data-sub="profil"]) { display: none; }
/* …et le sous-menu du profil remonte au premier niveau */
.admin-nav.is-profil > [data-sub="profil"] {
  margin: 0; padding-left: 0; border-left: 0;
}
.admin-nav.is-profil > [data-sub="profil"] a {
  padding: 11px 14px;
  font-size: .93rem;
}
.admin-nav.is-profil > [data-sub="profil"] a.active {
  background: var(--mint-100);
  color: var(--green-jasper);
}
.admin-nav.is-profil > [data-sub="profil"] a.active::before { display: none; }

/* Vidéo d'accueil : elle occupe le cadre exactement comme la photo */
.hero-media .frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ====== Titres des bannières de pages publiques ================ */
/* Avenir LT Std 65 Medium, sans italique, sur les quatre pages qui ont
   une bannière : Accueil, Nos offres, Adhérer, Contact. */
.hero .display,
.hero .sub {
  font-family: var(--font-titre);
  font-style: normal;
  font-weight: 500;
}
.hero .display { letter-spacing: 0; }

/* ====== Tunnel de réservation — étape 1 : les voyageurs ========= */
/* Reproduit l'écran « Sélectionnez des collaborateurs pour ce déplacement » :
   une colonne de recherche à gauche, la liste constituée à droite. */
.tunnel-title {
  text-align: center; font-size: 2rem; line-height: 1.2;
  font-family: var(--font-titre); font-weight: 500; letter-spacing: 0;
  margin: 6px auto 26px; max-width: 720px;
}

/* Onglets soulignés (Voyageurs / Invité) */
.tabs-line { display: flex; border-bottom: 2px solid var(--line); margin-bottom: 30px; }
.tabs-line button {
  flex: 1; border: 0; background: none; cursor: pointer; font: inherit;
  font-weight: 700; font-size: 1.02rem; color: var(--green-700);
  padding: 15px 10px; border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.tabs-line button.active { color: var(--green-800); border-bottom-color: var(--green-800); }

.pick-grid { display: grid; grid-template-columns: 380px 1fr; gap: 30px; align-items: start; }
.pick-grid > * { min-width: 0; }

/* Colonne de gauche */
.pick-search .field { margin-bottom: 14px; }
.pick-search .btn { width: auto; }
.pick-actions { display: flex; justify-content: flex-end; }
.pick-title {
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
  margin: 26px 0 6px;
}
.person-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
}
.person-id { min-width: 0; flex: 1; }
.person-id strong { display: block; font-size: .97rem; font-weight: 700; }
.person-id small {
  display: block; color: var(--ink-soft); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar-md {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--ocher-rocky); color: var(--green-900);
  display: grid; place-items: center; font-size: .82rem; font-weight: 800;
}
.person-add {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--green-600); display: grid; place-items: center;
  transition: background .2s;
}
.person-add:hover { background: var(--mint-100); }
.person-add[disabled] { color: var(--line); cursor: default; background: none; }
.person-empty { padding: 18px 2px; color: var(--ink-soft); font-size: .92rem; }

/* Pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; }
.pager button {
  min-width: 32px; height: 32px; padding: 0 8px; border: 0; cursor: pointer;
  background: none; font: inherit; font-weight: 700; font-size: .92rem;
  color: var(--green-700); border-radius: var(--radius-sm);
}
.pager button:hover:not([disabled]) { background: var(--mint-100); }
.pager button.active { background: var(--green-800); color: #fff; }
.pager button[disabled] { color: var(--line); cursor: default; }

/* Colonne de droite : liste vide */
.dropzone {
  border: 2px dashed #c6d5cf; border-radius: var(--radius-lg);
  min-height: 420px; display: grid; place-items: center;
  text-align: center; padding: 40px 30px;
}
.dropzone .ring {
  width: 108px; height: 108px; border-radius: 50%;
  border: 1px solid #c6d5cf; display: grid; place-items: center;
  margin: 0 auto 26px; color: #9db3ac;
}
.dropzone .ring .mi { width: 46px; height: 46px; }
.dropzone p { color: var(--ink-soft); max-width: 270px; margin: 0 auto; line-height: 1.5; }

/* Colonne de droite : voyageurs retenus */
.picked-list { display: grid; gap: 14px; }
.picked-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow);
}
.picked-head { display: flex; align-items: center; gap: 12px; }
.picked-head .icon-btn { margin-left: auto; }
.picked-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.picked-opts .field { margin: 0; }
.picked-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 22px;
}

/* Bandeau des voyageurs retenus, sur l'étape suivante */
.chosen-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chosen-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--mint-100); border-radius: 999px;
  padding: 7px 16px 7px 7px; font-weight: 600; font-size: .92rem;
}

@media (max-width: 1100px) {
  .pick-grid { grid-template-columns: 1fr; }
  .dropzone { min-height: 260px; }
}

/* Texte secondaire, hors carte de formulaire */
.muted { color: var(--ink-soft); }

/* Bouton d'étape suivante tant que rien n'est choisi : visible mais inerte */
.btn.is-off { opacity: .5; }

/* ====== Résultats de recherche : cartes de train ================ */
.trip-card {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden;
}
.trip-card-main {
  display: grid; grid-template-columns: 96px 1fr 384px;
  gap: 24px; padding: 22px 24px; align-items: center;
}
.trip-card-main > * { min-width: 0; }

/* Logo du transporteur — affiché seul quand le trajet est direct
   et assuré par un seul transporteur, comme sur SNCF Connect. */
.carrier {
  border: 1px solid var(--line); border-radius: var(--radius);
  height: 62px; display: grid; place-items: center; padding: 8px;
  background: #fff;
}
.carrier img { max-height: 38px; max-width: 76px; width: auto; object-fit: contain; }
/* Plusieurs transporteurs, ou une correspondance : pas de logo unique.
   Les logos de chaque tronçon apparaissent dans le détail du voyage. */
.carrier.is-multi { color: var(--ink-soft); }
.carrier.is-multi .mi { width: 22px; height: 22px; margin: 0 auto; display: block; }
.carrier .note {
  display: block; font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-soft); text-align: center; margin-top: 4px;
}

/* Horaires et gares */
.trip-run { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.trip-run .t { font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
.trip-run .g { color: var(--ink-soft); font-size: .84rem; margin-top: 2px; }
.trip-run .mid { text-align: center; color: var(--ink-soft); font-size: .84rem; }
.trip-run .mid .bar {
  height: 2px; background: var(--green-700); position: relative; margin: 7px 0;
}
.trip-run .mid .bar::after {
  content: ""; position: absolute; right: -1px; top: -4px;
  border-left: 8px solid var(--green-700);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.trip-run .mid .chg { color: var(--green-700); font-weight: 700; }
.trip-tags {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
  color: var(--ink-soft); font-size: .82rem;
}
.trip-tags > span { display: inline-flex; align-items: center; gap: 6px; }
.trip-tags .mi { width: 15px; height: 15px; }
.trip-tags .co2 { color: #1a9d5a; font-weight: 600; }

/* Grille des tarifs : Pro en haut, Standard en dessous ;
   2nde classe à gauche, 1re classe à droite. */
.fares {
  display: flex; flex-direction: column; gap: 5px;
  border-left: 1px solid var(--line); padding-left: 22px;
}
/* Toutes les lignes partagent le même gabarit : les colonnes restent
   alignées même si chaque ligne est un bloc à part. */
.fare-row {
  display: grid; grid-template-columns: 66px 1fr 1fr; gap: 8px;
  padding: 4px 6px; border-radius: var(--radius);
  border: 1px solid transparent;
}
.fare-head { padding-top: 0; padding-bottom: 0; }
/* Les tarifs Pro, mis en avant : c'est la gamme que l'entreprise
   privilégie (échange et remboursement sans frais). */
.fare-row.is-pro { background: var(--green-opaline); border-color: #cfeecd; }
.fares-total {
  text-align: right; font-size: .78rem; color: var(--ink-soft);
  margin-top: 6px; padding-right: 6px;
}
.fare-col {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); text-align: center; padding-bottom: 2px;
}
.fare-cat {
  display: flex; align-items: center; font-weight: 800; font-size: .95rem; color: var(--ink);
}
.fare {
  border: 2px solid transparent; border-radius: var(--radius);
  background: none; font: inherit; cursor: pointer; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  transition: border-color .2s, background .2s;
}
.fare:hover { border-color: var(--mint-500); background: var(--mint-50); }
.fare .amount { font-size: 1.22rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.fare .name {
  font-size: .68rem; color: var(--ink-soft); text-align: center;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.3;
}
.fare .seats {
  background: var(--ocher-rocky); color: var(--green-900);
  font-size: .66rem; font-weight: 700; border-radius: 999px; padding: 2px 8px;
  margin-bottom: 2px;
}
.fare.is-best { border-color: var(--green-800); }
.fare .best {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .66rem; font-weight: 800; color: var(--green-700);
  text-transform: uppercase; letter-spacing: .03em;
}
.fare-none {
  display: grid; place-items: center; color: #a8bdb6; font-size: 1.1rem; font-weight: 700;
}

/* Pied de carte : le détail du voyage */
.trip-card-foot { border-top: 1px solid var(--line); }
.trip-detail-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: none; cursor: pointer; font: inherit;
  padding: 13px 24px; color: var(--green-700); font-weight: 700; font-size: .92rem;
}
.trip-detail-toggle .mi { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .2s; }
.trip-detail-toggle.open .mi { transform: rotate(0deg); }
.trip-detail { padding: 4px 24px 22px; }
.leg { display: grid; grid-template-columns: 62px 40px 1fr; gap: 14px; padding: 9px 0; align-items: start; }
.leg-logo { display: grid; place-items: center; height: 22px; }
.leg-logo img { max-height: 22px; max-width: 40px; width: auto; object-fit: contain; }
.leg + .leg { border-top: 1px dashed var(--line); }
.leg .h { font-weight: 800; font-size: .95rem; }
.leg .g { font-weight: 600; font-size: .92rem; }
.leg .s { color: var(--ink-soft); font-size: .82rem; margin-top: 2px; }
.leg-change {
  display: flex; align-items: center; gap: 8px;
  background: var(--mint-100); border-radius: var(--radius);
  padding: 9px 14px; margin: 8px 0; font-size: .86rem; font-weight: 600; color: var(--green-700);
}

.results-empty {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 40px; text-align: center; color: var(--ink-soft);
}

@media (max-width: 1250px) {
  .trip-card-main { grid-template-columns: 96px 1fr; }
  .fares { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
}

/* ====== Accueil : l'invitation à essayer la démo ================ */
/* Un seul geste possible sous la vidéo. « Se connecter » et « Adhérer »
   restent accessibles depuis le menu du haut. */
.btn-try {
  height: 62px; min-width: 340px; padding: 0 40px;
  font-size: 1.18rem; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(52, 232, 142, .28);
}
.btn-try .mi { width: 22px; height: 22px; }
.hero-actions .btn-try { min-width: 340px; }

.try { padding: 30px 0 26px; }
.try-note {
  text-align: center; color: var(--ink-soft); font-size: .95rem;
  max-width: 520px; margin: 0 auto 42px; line-height: 1.6;
}
.try-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 22px; max-width: 980px; margin: 0 auto;
}
.try-card {
  display: flex; flex-direction: column; gap: 9px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px 24px;
  text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.try-card:hover {
  transform: translateY(-4px); border-color: var(--mint-400); box-shadow: var(--shadow);
}
.try-card .tico {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 6px;
  background: var(--green-pine); color: var(--green-grape);
  display: grid; place-items: center;
}
.try-card .tico .mi { width: 28px; height: 28px; }
.try-card h3 { font-size: 1.16rem; font-weight: 800; color: var(--green-pine); }
.try-card p { color: var(--ink-soft); font-size: .93rem; line-height: 1.55; flex: 1; }
.try-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  font-weight: 800; font-size: .95rem; color: var(--green-700);
}
.try-go .mi { width: 17px; height: 17px; transition: transform .16s ease; }
.try-card:hover .try-go .mi { transform: translateX(4px); }

/* Avantages resserrés : quatre repères, plus grands */
.points-lg { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 34px 46px; }
.points-lg .point { gap: 20px; }
.points-lg .point .pico {
  width: 60px; height: 60px; border-radius: 18px;
  background: #fff; border: 1px solid var(--line); color: var(--green-700);
}
.points-lg .point .pico .mi { width: 30px; height: 30px; }
.points-lg .point h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.points-lg .point p { font-size: 1rem; line-height: 1.6; }

@media (max-width: 767px) {
  .btn-try { min-width: 100%; height: 56px; font-size: 1.05rem; padding: 0 22px; }
  .hero-actions .btn-try { min-width: 100%; }
}

/* ====== Politique de voyage sur les résultats =================== */
/* La règle est énoncée une seule fois, au-dessus de la liste. */
.policy-note {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--green-opaline); border: 1px solid #cfeecd;
  border-radius: var(--radius-lg); padding: 15px 20px; margin-top: 22px;
  font-size: .92rem; color: var(--green-700); line-height: 1.55;
}
.policy-note .mi { flex-shrink: 0; margin-top: 2px; }
.policy-note strong { color: var(--green-pine); font-weight: 800; }
.policy-note a { color: var(--green-700); font-weight: 800; white-space: nowrap; text-decoration: underline; }

/* Un tarif fermé par la politique garde son prix, barré. */
.fare-off {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  padding: 8px 6px; border: 2px solid transparent; cursor: default;
}
.fare-off .amount {
  font-size: 1.22rem; font-weight: 800; line-height: 1.1;
  color: #6b7d78; text-decoration: line-through;
}
.fare-off .why {
  font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; color: #96521c; text-align: center; line-height: 1.3;
}

/* ====== Admin : matrice des rôles ============================== */
/* Même langage que le comparatif des offres, en plus compact :
   les rôles en colonnes, ce qu'ils permettent en lignes. */
.roles-scroll { overflow-x: auto; margin-top: 2px; position: relative; }
.roles-table {
  width: 100%; min-width: 620px;
  border-collapse: separate; border-spacing: 4px 0; font-size: .86rem;
}
.roles-table .rth-feat { width: 32%; }
.roles-table .rth {
  width: 13.6%; vertical-align: top; text-align: center;
  padding: 14px 8px 16px; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--green-pine); color: var(--white);
}
.roles-table .rth-admin { background: var(--green-jasper); }
.rth-name { display: block; font-size: .85rem; font-weight: 800; line-height: 1.3; }
.rth-sub  { display: block; margin-top: 6px; font-size: .68rem; font-weight: 600; opacity: .84; line-height: 1.4; }

/* Colonne « tout compris » légèrement teintée, comme sur les offres */
.rc-admin { background: var(--mint-50); }

.roles-group th {
  text-align: left; padding: 22px 4px 8px;
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--green-600);
}
.roles-table tbody th[scope="row"] {
  text-align: left; font-weight: 600; color: var(--ink); line-height: 1.45;
  padding: 12px 16px 12px 4px; border-bottom: 1px solid var(--line);
}
.roles-table tbody td {
  text-align: center; padding: 12px 6px; border-bottom: 1px solid var(--line);
}
.roles-table td.ok { line-height: 0; }
.roles-table td.no { color: #93aaa4; font-weight: 800; font-size: 1rem; line-height: 1; }
.roles-table .ok-badge { width: 27px; height: 27px; }
.roles-table .ok-badge .mi { width: 15px; height: 15px; }

/* ====== Guide utilisateur : visite guidée de l'espace =========== */
/* Un élément est éclairé à la fois : le voile sombre est en fait
   l'ombre portée du cadre, ce qui évite d'avoir à toucher au plan de
   superposition des éléments de la page. */
.app-head-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.guide-block { position: fixed; inset: 0; z-index: 1000; }
.guide-hole {
  position: fixed; z-index: 1001; pointer-events: none;
  border-radius: var(--radius); border: 2px solid var(--green-grape);
  box-shadow: 0 0 0 9999px rgba(0, 43, 40, .64);
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
.guide-tip {
  position: fixed; z-index: 1002;
  width: 344px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 20px 22px 18px;
  transition: top .28s ease, left .28s ease;
}
.guide-tip h3 { font-size: 1.08rem; font-weight: 800; color: var(--green-pine); margin: 0 26px 7px 0; }
.guide-tip p { color: var(--ink-soft); font-size: .93rem; line-height: 1.6; margin: 0; }
.guide-x {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-soft); cursor: pointer;
  display: grid; place-items: center;
}
.guide-x:hover { background: var(--mint-100); color: var(--green-700); }
.guide-x .mi { width: 15px; height: 15px; }
.guide-foot { display: flex; align-items: center; gap: 9px; margin-top: 20px; }
.guide-step { font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin-right: auto; }
.guide-tip .btn { height: 36px; padding: 0 16px; font-size: .9rem; }

/* Pointe orientée vers l'élément éclairé, au-dessus ou au-dessous */
.guide-tip::after {
  content: ""; position: absolute; left: var(--fleche, 50%);
  width: 0; height: 0; margin-left: -9px; border: 9px solid transparent;
}
.guide-tip.dessous::after { top: -18px; border-bottom-color: #fff; }
.guide-tip.dessus::after  { bottom: -18px; border-top-color: #fff; }
.guide-tip.droite::after,
.guide-tip.gauche::after,
.guide-tip.centre::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .guide-hole, .guide-tip { transition: none; }
}

/* ====== Réserver même complet ================================== */
/* À la place de la grille de tarifs, quand plus aucune place n'est
   vendue : on ne masque pas le train, on propose de le surveiller. */
.fares-complet {
  border-left: 1px solid var(--line); padding-left: 22px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 11px; text-align: center;
}
.fares-complet .mot {
  font-size: .92rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.fares-complet p { font-size: .83rem; color: var(--ink-soft); line-height: 1.5; max-width: 280px; }
.fares-complet .btn { height: 40px; font-size: .9rem; }

/* Les deux issues possibles, expliquées avant de valider */
.veille-cas { display: grid; gap: 12px; margin-top: 4px; }
.veille-cas > div {
  display: flex; align-items: flex-start; gap: 12px;
  border-radius: var(--radius); padding: 13px 16px;
  font-size: .9rem; line-height: 1.55;
}
.veille-cas .mi { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }
.veille-cas .oui { background: var(--green-opaline); color: var(--green-700); }
.veille-cas .non { background: #fdf3e8; color: #7a4614; }
.veille-cas .titre { display: block; font-weight: 800; margin-bottom: 2px; }

/* Ce que produit le choix de classe, dit sur-le-champ */
.veille-verdict {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: var(--radius); padding: 13px 16px; margin-top: 18px;
  font-size: .9rem; line-height: 1.55;
  background: var(--green-opaline); color: var(--green-700);
}
.veille-verdict.hors { background: #fdf3e8; color: #7a4614; }
.veille-verdict .mi { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }

.veille-train {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.veille-train .carrier { width: 96px; }

/* Deuxième prix : le tarif réservé aux entreprises sous Contrat Pro */
.card-detail .price-pro {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--green-opaline); border: 1px solid #cfeecd;
  border-radius: var(--radius); padding: 9px 14px; margin: -4px 0 14px;
  font-size: 1.15rem; font-weight: 800; color: var(--green-700);
}
.card-detail .price-pro small {
  font-size: .78rem; font-weight: 600; color: var(--ink-soft);
}
.card-detail .source {
  margin-top: 14px; font-size: .78rem; color: var(--ink-soft); font-style: italic;
}

/* Ce que possède déjà le bénéficiaire, avant de lui souscrire une carte */
.card-holder {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: var(--radius); padding: 13px 16px; margin: 0 0 20px;
  font-size: .9rem; line-height: 1.55;
  background: var(--green-opaline); color: var(--green-700);
}
.card-holder.attention { background: #fdf3e8; color: #7a4614; }
.card-holder .mi { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }
.card-holder strong { font-weight: 800; }

/* ====== Trains de nuit ========================================= */
/* Un train de nuit n'est pas un train comme les autres : on part le
   soir, on arrive le lendemain, et on achète une place couchée plutôt
   qu'un siège. La carte se distingue donc du reste de la liste. */
.trip-card.is-nuit { background: #f5f6fc; }
.trip-card.is-nuit .carrier { background: #fff; }
.trip-card.is-nuit .trip-card-foot { border-top-color: #dde0f2; }
.trip-card.is-nuit .fares,
.trip-card.is-nuit .fares-complet { border-left-color: #dde0f2; }
.trip-card.is-nuit .fare-row { border-color: transparent; }

.badge-nuit {
  display: inline-flex; align-items: center; gap: 7px;
  background: #1c2447; color: #dfe4ff; border-radius: 999px;
  padding: 6px 15px; font-size: .78rem; font-weight: 800;
}
.badge-nuit .mi { width: 15px; height: 15px; }

/* Arrivée le lendemain */
.trip-run .plus1 {
  font-size: .58em; font-weight: 800; vertical-align: super;
  margin-left: 3px; color: var(--green-600);
}

/* Transporteur sans logo : son nom, composé comme une marque */
.carrier-mot { text-align: center; line-height: 1.1; }
.carrier-mot .h {
  display: block; font-size: .64rem; font-weight: 900;
  letter-spacing: .02em; color: #1c2447;
}
.carrier-mot .b {
  display: block; font-size: .52rem; font-weight: 600;
  color: var(--ink-soft); margin-top: 3px;
}

/* Liaison absente du jeu de démonstration */
.route-note {
  display: flex; align-items: flex-start; gap: 13px;
  background: #fdf3e8; border: 1px solid #f3dcc2;
  border-radius: var(--radius-lg); padding: 15px 20px; margin-top: 22px;
  font-size: .92rem; color: #7a4614; line-height: 1.55;
}
.route-note .mi { flex-shrink: 0; margin-top: 2px; }
.route-note strong { font-weight: 800; }

/* =========================================================================
   CRM — outil interne de suivi des entreprises abonnées
   ========================================================================= */
.crm-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.12); color: var(--green-grape);
  border-radius: 999px; padding: 6px 14px;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.crm-produit { color: #fff; font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; }
.crm-produit small { display: block; color: var(--mint-300); font-weight: 600; font-size: .74rem; }
.crm-user {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--green-900); border-radius: 999px;
  padding: 5px 16px 5px 5px; font-weight: 800; font-size: .9rem;
}
.crm-user .avatar {
  width: 30px; height: 30px; border-radius: 50%; font-size: .74rem; font-weight: 800;
  background: var(--green-pine); color: var(--green-grape);
  display: grid; place-items: center;
}

/* Pastilles de statut */
.crm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.crm-dot-actif   { background: #1a9d5a; }
.crm-dot-veille  { background: #d99a00; }
.crm-dot-inactif { background: var(--sncf-red); }

/* Courbe de tendance */
.crm-spark polyline { stroke: var(--green-600); }
.crm-spark.is-down polyline { stroke: var(--sncf-red); }

/* Indicateurs */
.crm-kpi .k small { font-size: .9rem; font-weight: 700; color: var(--ink-soft); margin-left: 4px; }
.crm-kpi .trend.down { color: var(--sncf-red); }
.crm-kpi .trend.up { color: #1a9d5a; }
.crm-kpi .trend .mi { width: 14px; height: 14px; }

.crm-grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: start; }
.crm-grid-2 > * { min-width: 0; }
.crm-grid-2 > .panel { margin-top: 0; }

/* Liste « à traiter » */
.crm-todo { list-style: none; display: flex; flex-direction: column; }
.crm-todo li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.crm-todo li:last-child { border-bottom: 0; }
.crm-todo .ico {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
}
.crm-todo .ico .mi { width: 17px; height: 17px; }
.crm-todo .ico.rouge { background: #ffe1e7; color: var(--sncf-red); }
.crm-todo .ico.ocre  { background: #fff3d6; color: #a67400; }
.crm-todo .ico.vert  { background: var(--mint-100); color: var(--green-700); }
.crm-todo .txt { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.45; }
.crm-todo .txt a { font-weight: 800; color: var(--green-800); }
.crm-todo .txt small { display: block; color: var(--ink-soft); font-size: .8rem; margin-top: 2px; }
.crm-empty { color: var(--ink-soft); font-size: .9rem; padding: 10px 0; }

/* Barres empilées par offre */
.crm-chart .bar { background: linear-gradient(180deg, var(--green-600), var(--green-800)); }
.crm-chart .bar-col:last-child .bar { background: linear-gradient(180deg, var(--mint-500), var(--green-600)); }

/* Filtres de la liste */
.crm-filters {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.crm-filters .pill-field { flex: 1; min-width: 200px; padding: 10px 18px; }
.crm-filters select {
  font: inherit; font-size: .88rem; padding: 10px 34px 10px 14px;
  border: 1px solid var(--line); border-radius: 999px; background-color: #fff;
  color: var(--ink);
}
.crm-segnote {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--green-opaline); border: 1px solid #cfeecd; border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 16px; font-size: .9rem; color: var(--green-700);
}
.crm-segnote a { font-weight: 800; color: var(--green-700); text-decoration: underline; margin-left: auto; }

.crm-table td { vertical-align: middle; }
.crm-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-table th.num { text-align: right; }
.crm-client { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crm-client .avatar-md { background: var(--mint-100); color: var(--green-700); }
.crm-client a { font-weight: 800; color: var(--ink); }
.crm-client a:hover { color: var(--green-600); text-decoration: underline; }
.crm-client small { display: block; color: var(--ink-soft); font-size: .8rem; }
.crm-table tbody tr { cursor: pointer; transition: background .15s; }
.crm-table tbody tr:hover { background: var(--mint-50); }
.crm-count { color: var(--ink-soft); font-size: .88rem; margin-top: 14px; }

/* Fiche client */
.crm-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.crm-head .logo {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  background: var(--green-pine); color: var(--green-grape);
  display: grid; place-items: center; font-size: 1.35rem; font-weight: 900;
}
.crm-head h1 { font-size: 1.9rem; margin: 0; }
.crm-head .meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; color: var(--ink-soft); font-size: .9rem; }
.crm-head .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.crm-contacts { display: grid; gap: 12px; }
.crm-contact {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.crm-contact .avatar-md { background: var(--ocher-rocky); }
.crm-contact strong { display: block; font-size: .96rem; }
.crm-contact .fonction { color: var(--ink-soft); font-size: .84rem; }
.crm-contact .coord { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: .86rem; }
.crm-contact .coord a { display: inline-flex; align-items: center; gap: 7px; color: var(--green-700); font-weight: 600; }
.crm-contact .coord .mi { width: 15px; height: 15px; }

.crm-timeline { list-style: none; position: relative; padding-left: 26px; }
.crm-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.crm-timeline li { position: relative; padding: 0 0 18px; }
.crm-timeline li:last-child { padding-bottom: 0; }
.crm-timeline .pt {
  position: absolute; left: -26px; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--green-600); display: grid; place-items: center;
}
.crm-timeline .pt .mi { width: 11px; height: 11px; color: var(--green-600); }
.crm-timeline .pt.alerte { border-color: var(--sncf-red); }
.crm-timeline .pt.alerte .mi { color: var(--sncf-red); }
.crm-timeline .quand { font-size: .78rem; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.crm-timeline p { font-size: .9rem; line-height: 1.5; margin-top: 3px; }
.crm-timeline .nouvelle .pt { border-color: var(--mint-500); background: var(--mint-500); }
.crm-note { display: flex; gap: 10px; margin-bottom: 20px; }
.crm-note textarea {
  flex: 1; font: inherit; font-size: .9rem; resize: vertical; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 14px;
}

/* Segments */
.crm-segs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.crm-seg {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 20px; color: inherit; text-decoration: none;
  transition: border-color .2s, transform .15s;
}
.crm-seg:hover { border-color: var(--mint-500); transform: translateY(-2px); }
.crm-seg .n { font-size: 2rem; font-weight: 900; color: var(--green-700); line-height: 1; }
.crm-seg strong { font-size: 1rem; }
.crm-seg small { color: var(--ink-soft); font-size: .84rem; line-height: 1.45; }
.crm-seg .voir { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: .86rem; color: var(--green-600); }

/* Automatisations */
.crm-autos { display: grid; gap: 14px; }
.crm-auto {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 22px; transition: opacity .2s;
}
.crm-auto.is-off { opacity: .6; }
.crm-auto h3 { font-size: 1.02rem; margin-bottom: 8px; }
.crm-regle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; }
.crm-regle .quand, .crm-regle .alors {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 5px 13px; font-weight: 600;
}
.crm-regle .quand { background: #fff3d6; color: #7a5a00; }
.crm-regle .alors { background: var(--mint-100); color: var(--green-700); }
.crm-regle .mi { width: 14px; height: 14px; }
.crm-regle .fleche { color: var(--ink-soft); }
.crm-auto .portee { margin-top: 10px; font-size: .84rem; color: var(--ink-soft); }
.crm-auto .portee a { font-weight: 800; color: var(--green-700); }

.crm-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.crm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crm-switch .rail {
  width: 44px; height: 24px; border-radius: 999px; background: #c9d6d2; position: relative; transition: background .2s;
}
.crm-switch .rail::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s;
}
.crm-switch input:checked + .rail { background: var(--green-600); }
.crm-switch input:checked + .rail::after { transform: translateX(20px); }
.crm-switch input:focus-visible + .rail { outline: 3px solid var(--green-jasper); outline-offset: 2px; }

.crm-note-demo { margin-top: 26px; font-size: .82rem; color: var(--ink-soft); text-align: center; }

@media (max-width: 1100px) {
  .crm-grid-2 { grid-template-columns: 1fr; }
}

/* =========================== Politique de voyage : transporteurs ===== */
.rule-hint { font-size: .86rem; margin: 2px 0 14px; }
.carrier-choices {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.carrier-choice {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.carrier-choice input { margin-top: 3px; flex-shrink: 0; }
.carrier-choice strong { display: block; font-size: .92rem; color: var(--green-jasper); }
.carrier-choice small { display: block; font-size: .8rem; color: var(--ink-soft); }
.carrier-choice:has(input:checked) { border-color: var(--green-600); background: var(--mint-50); }
.carrier-choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* Message d'erreur sous un groupe de champs */
.form-error {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; font-size: .86rem; font-weight: 600; color: #a1002b;
}
.form-error .mi { color: #a1002b; margin-top: 1px; }

/* =========================== Relevé : envoi automatique ============== */
.dest-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.dest-list:empty { display: none; }
.dest-list .chip-val { display: inline-flex; align-items: center; gap: 6px; }
.dest-x {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.dest-x:hover { background: rgba(5, 44, 37, .08); }
.dest-x .mi { width: 12px; height: 12px; }
.dest-add { display: flex; gap: 10px; flex-wrap: wrap; }
.dest-add input { flex: 1 1 240px; }
.envoi-prochain { margin: 20px 0 16px; font-size: .92rem; color: var(--ink-soft); }
.envoi-prochain strong { color: var(--green-jasper); }

/* =========================== Fenêtre modale commune ================== */
/* Rendez-vous, fonction réservée à une autre offre : même voile que la
   popup d'accueil, contenu aligné à gauche. */
.intro-card.modale { text-align: left; max-width: 540px; max-height: calc(100vh - 40px); overflow: auto; }
.intro-card.modale h2 { font-size: 1.35rem; padding-right: 36px; }
.intro-card.modale h2:focus { outline: none; }
.intro-card.modale .intro-badge { display: inline-flex; align-items: center; gap: 6px; }
.intro-card.modale .intro-badge .mi { width: 14px; height: 14px; }
.intro-card.modale .btn { width: auto; }
.intro-card.modale > .btn { width: 100%; }
.intro-card.modale .text-center { text-align: center; }
.modale-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.rdv-tete { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; padding-right: 30px; }
.rdv-tete h2 { margin-bottom: 4px; padding-right: 0; }
.rdv-tete p { margin: 0; font-size: .9rem; }
.rdv-photo { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.rdv-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.rdv-form legend { font-weight: 800; color: var(--green-jasper); margin-bottom: 10px; font-size: .95rem; }
.rdv-jours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rdv-jour > p { font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 8px; }
.rdv-jour > p::first-letter { text-transform: uppercase; }
.rdv-creneau { display: block; margin-bottom: 8px; cursor: pointer; }
.rdv-creneau input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rdv-creneau span {
  display: block; text-align: center; padding: 9px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-weight: 700; font-size: .9rem; color: var(--green-700);
  transition: background .15s ease, border-color .15s ease;
}
.rdv-creneau:hover span { border-color: var(--green-600); }
.rdv-creneau input:checked + span { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.rdv-creneau input:focus-visible + span { outline: 3px solid var(--green-jasper); outline-offset: 2px; }
.intro-card.modale .rdv-form .btn { width: 100%; }
.rdv-fine { font-size: .8rem; margin: 10px 0 0; text-align: center; }
@media (max-width: 480px) {
  .rdv-jours { grid-template-columns: 1fr; }
  .rdv-tete { flex-direction: column; align-items: flex-start; }
}

/* =========================== Interlocuteur (Admin) =================== */
.interlocuteur {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.interlocuteur-photo { width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0; }
.interlocuteur-infos { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--ink-soft); }
.interlocuteur-infos strong { font-size: 1.1rem; color: var(--green-jasper); }
.interlocuteur-infos .mi { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; }
.interlocuteur .btn { align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; }
.interlocuteur .btn .mi { width: 18px; height: 18px; }

/* =========================== Fonctions réservées à une autre offre === */
/* Grisé sans transparence : le noir et blanc garde la luminosité des
   couleurs, donc le contraste du texte (RGAA 3.2) reste celui d'origine.
   Ces boutons restent cliquables — ils ouvrent l'explication. */
.is-verrouille {
  filter: grayscale(1);
  border-style: dashed;
  cursor: help;
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap; white-space: normal; max-width: 100%; text-align: left;
}
.panel.est-verrouille { cursor: help; }
.panel.est-verrouille .panel-head, .panel.est-verrouille .verrou-bandeau { cursor: auto; }
.verrou-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--green-jasper); color: #fff;
  border-radius: 999px; padding: 2px 8px 2px 6px;
  font-size: .7rem; font-weight: 800; letter-spacing: .02em;
}
.verrou-tag .mi { width: 12px; height: 12px; }
.verrou-bandeau {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--mint-50); border: 1px dashed var(--green-600);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.verrou-bandeau > .mi { width: 22px; height: 22px; color: var(--green-700); }
.verrou-bandeau p { flex: 1 1 240px; margin: 0; font-size: .9rem; color: var(--ink-muted); }
.verrou-bandeau strong { color: var(--green-jasper); }
.verrou-flou { filter: grayscale(1); user-select: none; }

/* Bloc « Votre offre » */
.offre-liste { list-style: none; display: grid; gap: 10px; margin: 6px 0 0; }
.offre-liste li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.offre-liste .mi { width: 18px; height: 18px; margin-top: 1px; }
.offre-liste .is-inclus .mi { color: var(--green-600); }
.offre-liste .is-verrou { color: var(--ink-muted); }
.offre-liste small { color: var(--ink-muted); }
.offre-demo {
  margin-top: 22px; padding: 14px 16px; border-radius: var(--radius);
  background: #fff8e8; border: 1px solid #f3dca4;
}
.offre-demo label { display: block; font-size: .84rem; font-weight: 700; color: #7a5a00; margin-bottom: 8px; }
.offre-demo select { max-width: 320px; }
.offre-demo.field { margin-bottom: 0; }

/* =========================== Aide et contact (bouton vert) =========== */
.fab .mi { pointer-events: none; }
.fab[aria-expanded="true"] { background: var(--green-800); color: #fff; }
.aide-panel {
  position: fixed; right: 26px; bottom: 112px; z-index: 95;
  width: 400px; max-height: calc(100vh - var(--header-h) - 128px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  animation: introPop .25s cubic-bezier(.2,.8,.25,1);
}
body.aide-ouverte .to-top { display: none; }
.aide-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--green-800); color: #fff;
  padding: 16px 18px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.aide-tete h2 { font-size: 1.1rem; font-weight: 800; color: #fff; }
.aide-tete h2:focus { outline: none; }
.aide-x {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
}
.aide-x:hover { background: rgba(255,255,255,.22); }
.aide-x .mi { width: 16px; height: 16px; }
.aide-corps { overflow: auto; padding: 16px 18px 18px; }
.aide-titre { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 18px 0 8px; }
.aide-corps > .aide-titre:first-child { margin-top: 2px; }
.aide-contact {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--mint-50); border-radius: var(--radius); padding: 12px;
}
.aide-contact img { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.aide-contact div { flex: 1; min-width: 0; }
.aide-contact strong { display: block; color: var(--green-jasper); }
.aide-contact small { display: block; color: var(--ink-soft); font-size: .8rem; }
.aide-contact .btn { flex-basis: 100%; padding: 9px 12px; font-size: .86rem; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.aide-contact .btn .mi { width: 16px; height: 16px; }
.aide-faq details { border-bottom: 1px solid var(--line); }
.aide-faq summary {
  cursor: pointer; padding: 10px 0; font-weight: 700; font-size: .9rem; color: var(--green-jasper);
  list-style-position: outside;
}
.aide-faq details p { font-size: .86rem; color: var(--ink-soft); margin: 0 0 12px; }
.aide-faq a, .aide-plus { color: var(--green-700); font-weight: 700; }
.aide-form .field { margin-bottom: 12px; }
.aide-form textarea { width: 100%; resize: vertical; }
.aide-form .btn { width: 100%; }
.aide-merci { text-align: center; padding: 6px 0; }
.aide-merci > .mi { width: 34px; height: 34px; color: var(--green-600); }
.aide-merci p { font-size: .9rem; color: var(--ink-soft); margin: 8px 0; }
.aide-merci .demo-note { margin: 12px 0; }
.aide-plus { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .86rem; }
.aide-plus .mi { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .aide-panel { left: 12px; right: 12px; width: auto; bottom: 108px; max-height: calc(100vh - var(--header-h) - 120px); }
}

/* =========================== Registre des entreprises (Admin) ======== */
.registre {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff8e8; border: 1px solid #f3dca4; border-radius: var(--radius);
  padding: 16px 18px; margin: 0 0 20px;
}
.registre > .mi { width: 22px; height: 22px; color: #a67400; margin-top: 1px; }
.registre-txt { flex: 1; min-width: 0; }
.registre-txt > strong { display: block; color: var(--green-jasper); margin-bottom: 4px; }
.registre-txt > p { font-size: .9rem; color: var(--ink-soft); margin: 0 0 12px; }
.registre-diff { background: #fff; border-radius: var(--radius-sm); }
.registre-diff td:last-child { font-weight: 700; color: var(--green-700); }
.registre-txt .demo-note { margin: 14px 0 0; padding-top: 12px; }
.registre-etat {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--mint-100); color: var(--green-700); font-weight: 600; font-size: .9rem;
  border-radius: var(--radius); padding: 12px 14px; margin: 0 0 20px;
}
.registre-etat .mi { margin-top: 2px; }
.registre-source { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--ink-soft); margin: 4px 0 0; }
.registre-source .mi { width: 15px; height: 15px; color: var(--green-600); margin-top: 2px; }
.registre-diff tbody th { text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--green-jasper); }

/* Offre dans le menu de gauche de l'espace client, avec le sélecteur
   de démonstration (fond vert foncé : textes clairs). */
.side-offre {
  margin: 14px 0 6px; padding: 12px 14px;
  border: 1px dashed rgba(187, 255, 190, .45); border-radius: var(--radius);
}
.side-offre-nom { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.side-offre-nom span { font-size: .78rem; color: rgba(255, 255, 255, .78); }
.side-offre-nom strong { color: var(--green-grape); font-size: .9rem; }
.side-offre label { display: block; font-size: .74rem; color: rgba(255, 255, 255, .78); margin-bottom: 6px; }
.side-offre select {
  width: 100%; font: inherit; font-size: .84rem; padding: 7px 10px;
  border-radius: var(--radius-sm); border: 0; background: #fff; color: var(--green-jasper);
}

/* Bouton à l'allure de lien, dans une phrase */
.lien {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--green-700); font-weight: 700; text-decoration: underline;
}

/* Ligne « fonction d'une autre offre », dans un texte */
.verrou-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-muted); margin: -6px 0 16px; }
.verrou-ligne .mi { width: 16px; height: 16px; color: var(--green-700); }
.vide-paiement { padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-soft); font-size: .92rem; margin: 0 0 4px; }
.envoi-modifie { font-size: .84rem; font-weight: 700; color: #7a5a00; }

.side-offre-crm {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: .78rem; font-weight: 700; color: var(--green-grape);
}
.side-offre-crm .mi { width: 13px; height: 13px; }

/* Sur téléphone, une valeur longue (adresse) passe à la ligne au lieu
   d'élargir la page. */
@media (max-width: 560px) {
  .summary-line > :last-child { white-space: normal; }
}

/* Admin sur un écran d'ordinateur étroit (vers 1024 px) : les deux
   cartes logées passent l'une sous l'autre plutôt que de déborder. */
@media (max-width: 1180px) {
  .admin-content .grid-2:has(> .pay-card) { grid-template-columns: 1fr; }
}

/* =========================== Offre Découverte ======================== */
.side-offre-fin { margin: -4px 0 10px; font-size: .76rem; color: rgba(255, 255, 255, .78); }
.offre-fin { margin: -4px 0 16px; font-size: .9rem; font-weight: 600; color: var(--green-700); }
.decouverte-bandeau {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--mint-50); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 22px;
}
.decouverte-bandeau.is-fin { background: #fff8e8; border-color: #f3dca4; }
.decouverte-bandeau > .mi { width: 24px; height: 24px; color: var(--green-700); margin-top: 1px; }
.decouverte-bandeau.is-fin > .mi { color: #a67400; }
.decouverte-bandeau strong { display: block; color: var(--green-jasper); margin-bottom: 4px; }
.decouverte-bandeau p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.decouverte-bandeau a { color: var(--green-700); font-weight: 700; }
.decouverte-choix, .decouverte-motif { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.decouverte-motif label { flex-basis: 100%; font-size: .86rem; font-weight: 700; color: var(--green-jasper); }
.decouverte-motif select {
  min-width: 260px; font: inherit; font-size: .92rem; color: var(--ink);
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.decouverte-merci { margin-top: 10px !important; font-weight: 600; color: var(--green-700) !important; }

/* =========================== Adhérer : SIREN ========================= */
.champ-aide { display: block; margin-top: 6px; font-size: .8rem; color: var(--ink-soft); }
.siren-msg:empty { display: none; }
.siren-msg { margin: -6px 0 18px; font-size: .9rem; border-radius: var(--radius); }
.siren-msg.is-ok { color: var(--green-700); font-weight: 600; }
.siren-msg.is-erreur { color: #a1002b; font-weight: 600; }
.siren-msg.is-deja { background: #fff8e8; border: 1px solid #f3dca4; padding: 14px 16px; }
.siren-msg.is-deja strong { display: block; color: var(--green-jasper); margin-bottom: 4px; }
.siren-msg.is-deja p { margin: 0 0 12px; color: var(--ink-soft); }
.siren-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================== CRM : inscriptions et parcours ========== */
.crm-aide { font-size: .86rem; margin: -6px 0 14px; }
.crm-inscr { list-style: none; display: flex; flex-direction: column; }
.crm-inscr li {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.crm-inscr li:last-child { border-bottom: 0; }
.crm-inscr-txt { flex: 1 1 220px; min-width: 0; }
.crm-inscr-txt strong { color: var(--green-jasper); }
.crm-inscr-txt small { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }
.crm-inscr-txt small.ok { color: var(--green-700); font-weight: 600; }
.crm-inscr-actions { display: flex; gap: 8px; align-items: center; }
.crm-inscr-actions select {
  font: inherit; font-size: .84rem; padding: 8px 10px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.crm-inscr-actions .btn { padding: 8px 14px; font-size: .86rem; }

.crm-parcours { list-style: none; display: flex; flex-direction: column; counter-reset: etape; }
.crm-parcours li {
  display: grid; grid-template-columns: 170px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.crm-parcours li:last-child { border-bottom: 0; }
.crm-parcours .quand {
  justify-self: start; background: var(--mint-100); color: var(--green-700);
  border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 800;
}
.crm-parcours strong { display: block; color: var(--green-jasper); font-size: .92rem; }
.crm-parcours small { display: block; color: var(--ink-soft); font-size: .8rem; margin-top: 2px; }
.crm-parcours .btn { padding: 7px 14px; font-size: .84rem; }
@media (max-width: 700px) {
  .crm-parcours li { grid-template-columns: 1fr; }
}

/* Aperçu d'un e-mail, dans la fenêtre commune */
.mail-tete { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 6px 0 14px; }
.mail-tete p { margin: 0 0 4px; font-size: .86rem; color: var(--ink); }
.mail-tete p:last-child { margin-bottom: 0; }
.mail-tete span { display: inline-block; width: 56px; color: var(--ink-soft); }
.mail-corps { font-size: .92rem; color: var(--ink); }
.mail-corps p { color: var(--ink); margin-bottom: 10px; }
.mail-corps ol { margin: 0 0 12px 20px; }
.mail-btn {
  display: inline-block; background: var(--green-grape); color: var(--green-jasper);
  border-radius: var(--radius); padding: 9px 16px; font-weight: 800; font-size: .88rem;
}
.mail-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-petit { font-size: .8rem !important; color: var(--ink-soft) !important; }
/* Douze mois dans une colonne étroite : on resserre l'histogramme pour
   qu'il tienne dans son cadre, de 1024 à 1366 px de large. */
.crm-chart { gap: 6px; }
.crm-chart .bar-col { min-width: 0; }
.crm-chart .bar-val, .crm-chart .bar-lab { font-size: .66rem; white-space: nowrap; }

/* Interlocuteur sans portrait : ses initiales */
.portrait-initiales {
  display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%;
  background: var(--green-grape); color: var(--green-jasper); font-weight: 800; font-size: 1.1rem;
}
.aide-photo { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }

/* =========================== Messages aux clients ==================== */
/* Sur le tableau de bord de l'espace client, publiés depuis le CRM.
   Trois niveaux : information (vert), avertissement (ocre), important
   (framboise, la couleur d'alerte de la charte). */
.msg-zone { margin-bottom: 22px; }
.msg-liste { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.msg-portail {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--radius); padding: 14px 16px;
  /* Fond blanc, comme les autres cartes du tableau de bord : l'encart se
     détache du fond vert très clair de la page. */
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--green-600);
  box-shadow: 0 2px 10px rgba(5, 44, 37, .05);
}
.msg-portail.is-avertissement { background: #fff8e8; border-color: #f3dca4; border-left-color: #c98a00; }
.msg-portail.is-important { background: #fff1f4; border-color: #f4c3cf; border-left-color: var(--red-raspberry); }
.msg-portail > .mi { width: 22px; height: 22px; margin-top: 2px; color: var(--green-700); }
.msg-portail.is-avertissement > .mi { color: #8a5d00; }
.msg-portail.is-important > .mi { color: var(--red-raspberry); }

/* Avertissement et message important : la cloche se balance en continu,
   comme une cloche qui sonne, sans changer de couleur : elle reste dans
   sa teinte sombre. Le client arrête l'animation en
   masquant le message ; elle disparaît aussi pour qui a demandé à son
   système de réduire les animations (RGAA 13.8). */
.msg-portail.is-avertissement > .mi-bell,
.msg-portail.is-important > .mi-bell {
  animation: cloche 1.6s ease-in-out infinite;
  transform-origin: 50% 10%;
}
@keyframes cloche {
  0%, 45%, 100% { transform: rotate(0); }
  15%           { transform: rotate(14deg); }
  30%           { transform: rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .msg-portail.is-avertissement > .mi-bell,
  .msg-portail.is-important > .mi-bell { animation: none; }
}
.msg-txt { flex: 1; min-width: 0; }
.msg-niveau { font-size: .72rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft) !important; margin: 0 0 2px !important; }
.msg-portail.is-important .msg-niveau { color: #a1002b !important; }
.msg-txt strong { display: block; color: var(--green-jasper); margin-bottom: 2px; }
.msg-txt p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.msg-txt a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .88rem; font-weight: 700; color: var(--green-700); }
.msg-txt a .mi { width: 14px; height: 14px; }
.msg-x {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  background: transparent; color: var(--ink-soft); display: grid; place-items: center;
}
.msg-x:hover { background: rgba(5, 44, 37, .08); }
.msg-x .mi { width: 15px; height: 15px; }
.msg-revoir { margin-top: 8px; font-size: .86rem; }

/* CRM : écrire un message aux clients */
.msg-niveaux { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.msg-niveaux legend { font-weight: 700; font-size: .9rem; color: var(--green-jasper); margin-bottom: 8px; width: 100%; }
.msg-choix { cursor: pointer; }
.msg-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.msg-choix > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1.5px solid var(--line); border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--ink-soft);
}
.msg-choix > span .mi { width: 15px; height: 15px; }
.msg-choix input:checked + span { color: var(--green-jasper); border-color: var(--green-600); background: var(--mint-50); }
.msg-choix.is-avertissement input:checked + span { border-color: #c98a00; background: #fff8e8; }
.msg-choix.is-important input:checked + span { border-color: var(--red-raspberry); background: #fff1f4; }
.msg-choix input:focus-visible + span { outline: 3px solid var(--green-jasper); outline-offset: 2px; }
.msg-compteur { font-weight: 400; font-size: .8rem; margin-left: 6px; }
.msg-form textarea { resize: vertical; }

.msg-publies { list-style: none; display: flex; flex-direction: column; }
.msg-publies li { padding: 14px 0 14px 14px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--green-600); margin-bottom: 4px; }
.msg-publies li.is-avertissement { border-left-color: #c98a00; }
.msg-publies li.is-important { border-left-color: var(--red-raspberry); }
.msg-publies li:last-child { border-bottom: 0; }
.msg-pub-tete { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.msg-pub-niveau { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.msg-publies strong { display: block; color: var(--green-jasper); }
.msg-publies p { font-size: .88rem; color: var(--ink-soft); margin: 2px 0 6px; }
.msg-publies small { display: block; font-size: .78rem; color: var(--ink-soft); margin-bottom: 6px; }
.msg-publies .lien { font-size: .84rem; }

.releve-specimen { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; margin: 14px 0 0; }
.releve-specimen .mi { margin-top: 2px; color: var(--green-600); }

/* =========================== Client de démonstration : son blason ==== */
/* La Ville de Rivebelle (commune fictive) : son blason dans la barre
   latérale et en tête du tableau de bord et du Relevé. */
.sidebar .who .avatar.avatar-logo { background: #fff; padding: 4px; overflow: hidden; border-radius: 10px; }
/* Dimensions explicites : dans une pastille en grille, une hauteur en %
   ne se résout pas, et le blason débordait puis était rogné. */
.avatar-logo img { width: auto; height: 34px; max-width: 100%; display: block; }
.client-tete { display: flex; align-items: center; gap: 16px; }
.client-logo { width: 54px; height: auto; flex-shrink: 0; }
.crm-head .logo.a-logo { background: #fff; border: 1px solid var(--line); padding: 6px; }
.crm-head .logo.a-logo img { width: auto; height: 50px; max-width: 100%; display: block; }
.logo-orga { display: flex; gap: 16px; align-items: center; border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 4px 0 14px; }
.logo-orga img { width: 56px; height: auto; flex-shrink: 0; }
.logo-orga strong { display: block; color: var(--green-jasper); }
.logo-orga p { font-size: .86rem; margin: 2px 0 10px; }
.logo-orga .btn { padding: 7px 14px; font-size: .86rem; }
.crm-client .avatar-md.a-logo { background: #fff; border: 1px solid var(--line); padding: 3px; }
.avatar-md.a-logo img { width: auto; height: 30px; max-width: 100%; display: block; }

/* =========================== Conseiller d'économies ================= */
/* Page en pause : espace/economies.html n'est plus publiée (voir .gitignore). */
/* Page Économies : une fiche par collaborateur, avec le calcul dépliable.
   Le liseré de gauche dit la conclusion avant même de lire : vert pour
   une carte conseillée, ambre pour un renouvellement, gris sinon. */
.eco-liste { display: flex; flex-direction: column; gap: 16px; }
.eco-fiche {
  border: 1px solid var(--line); border-left: 4px solid var(--green-600);
  border-radius: var(--radius); padding: 18px 20px; background: #fff;
}
.eco-fiche.is-renouveler { border-left-color: #c98a00; }
.eco-fiche.is-equipe { border-left-color: var(--mint-500); }
.eco-fiche.is-inutile { border-left-color: #c9d6d3; }
.eco-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eco-tete > div { flex: 1; min-width: 200px; }
.eco-tete h3 { font-size: 1.05rem; font-weight: 800; color: var(--green-jasper); }
.eco-tete small { color: var(--ink-soft); font-size: .85rem; }
.eco-corps { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin-top: 12px; }
.eco-corps p { font-size: .93rem; line-height: 1.55; }
.eco-corps p.eco-remarque { color: var(--ink-soft); font-size: .86rem; margin-top: 6px; }
.eco-gain {
  flex-shrink: 0; text-align: right; background: var(--mint-100);
  border-radius: var(--radius); padding: 10px 16px;
}
.eco-gain span { display: block; font-size: .76rem; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.eco-gain strong { font-size: 1.6rem; font-weight: 800; color: var(--green-700); white-space: nowrap; }
.eco-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.eco-calcul { margin-top: 10px; }
.eco-calcul summary { cursor: pointer; font-weight: 700; color: var(--green-600); font-size: .9rem; width: fit-content; padding: 6px 0; }
.eco-calcul .table { margin-top: 6px; font-size: .86rem; }
.eco-calcul .table th, .eco-calcul .table td { padding: 8px 10px; }
.eco-calcul tfoot th { text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--ink); text-align: right; }
.eco-calcul tfoot td { font-weight: 700; }
.eco-calcul td + td { white-space: nowrap; }
.eco-methode { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.55; }
.eco-note { font-size: .86rem; margin-top: 16px; line-height: 1.55; }

/* Encart du tableau de bord, qui mène à la page Économies */
.eco-encart { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.eco-encart > .mi { width: 34px; height: 34px; color: var(--green-600); }
.eco-encart > div { flex: 1; min-width: 240px; }
.eco-encart strong { color: var(--green-jasper); font-weight: 800; }
.eco-encart p { color: var(--ink-soft); font-size: .92rem; margin-top: 2px; line-height: 1.5; }

/* =========================== Contrat SNCF du client ================= */
/* Tableau de bord et Admin, à côté du Guide utilisateur : le contrat commercial
   signé avec SNCF Voyageurs (Pro, Premium, Grand Compte), distinct de
   l'offre du Portail Entreprises. Même hauteur que les boutons voisins. */
.contrat-sncf {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px;
  background: var(--green-opaline); border: 1px solid #cfeecd;
  border-radius: var(--radius); color: var(--green-700);
}
.contrat-sncf .mi { width: 18px; height: 18px; }
.contrat-sncf > span:last-child { font-size: .95rem; font-weight: 600; white-space: nowrap; }
.contrat-sncf strong { font-weight: 800; }

/* =========================== Demandes à valider ===================== */
/* Tableau de bord : une ligne par demande — qui, quel trajet, combien,
   et la décision. Le motif du refus s'ouvre à la place des boutons. */
.valid-liste { list-style: none; display: flex; flex-direction: column; }
.valid-item {
  display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(210px, 1.5fr) auto auto;
  gap: 8px 22px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.valid-item:first-child { padding-top: 0; }
.valid-qui { display: flex; align-items: center; gap: 10px; }
.valid-item strong { display: block; color: var(--green-jasper); font-weight: 800; }
.valid-item small { display: block; font-size: .84rem; color: var(--ink-soft); }
.valid-prix { text-align: right; white-space: nowrap; }
.valid-etat { justify-self: end; }
.valid-actions { display: flex; gap: 10px; }
.valid-motif { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.valid-motif label { flex-basis: 100%; text-align: right; font-size: .84rem; font-weight: 700; color: var(--green-jasper); }
.valid-motif select {
  min-width: 230px; font: inherit; font-size: .92rem; color: var(--ink);
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.valid-fait { max-width: 360px; text-align: right; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.valid-fait.is-ok { color: var(--green-700); }
.valid-fait.is-non { color: var(--sncf-red); }
.valid-fait small { display: inline; font-weight: 400; font-size: .8rem; color: var(--ink-muted); }
.valid-fait .lien { font-size: .84rem; }
.valid-note { grid-column: 1 / -1; font-size: .86rem; margin: 0; }
.valid-regle { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; margin: 14px 0 0; }
.valid-regle .mi { color: var(--green-600); margin-top: 2px; }
@media (max-width: 1180px) {
  .valid-item { grid-template-columns: 1fr 1fr auto; }
  .valid-etat { grid-column: 1 / -1; justify-self: start; }
  .valid-motif { justify-content: flex-start; }
  .valid-motif label, .valid-fait { text-align: left; }
}

/* Collaborateurs : colonne « Carte » */
.carte-nom { display: block; font-weight: 600; white-space: nowrap; }
.carte-etat { display: block; font-size: .82rem; }
.carte-etat.is-bientot { color: #8a5d00; font-weight: 700; }
.carte-etat.is-expiree { color: var(--sncf-red); font-weight: 700; }

/* =========================== Réserver même complet ================== */
/* Fenêtre des résultats : le fonctionnement en trois temps, puis le choix
   des classes à surveiller avec leur prix maximum. Les mêmes tuiles de
   classe servent dans le formulaire de la page Réserver même complet. */
.intro-card.modale.modale-complet { max-width: 620px; }
.intro-card .rc-train { font-size: .9rem; margin: -6px 0 16px; }
.rc-etapes, .cx-etapes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 20px; counter-reset: none; }
.rc-etapes li, .cx-etapes li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-size: .88rem; font-weight: 700; line-height: 1.35; color: var(--green-jasper);
  background: var(--mint-50); border-radius: var(--radius); padding: 10px 12px;
}
.rc-etapes li span, .cx-etapes li span {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-pine); color: #fff; font-size: .78rem; font-weight: 800;
}
.rc-classes { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.rc-classes legend { font-weight: 800; color: var(--green-jasper); margin-bottom: 10px; font-size: 1rem; padding: 0; }
.rc-classes legend small { font-weight: 400; font-size: .86rem; margin-left: 6px; }
.rc-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rc-classe {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 14px 12px 44px;
  cursor: pointer; background: #fff;
}
.rc-classe input { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; accent-color: var(--green-pine); }
.rc-classe:has(input:checked) { border: 2px solid var(--green-jasper); background: var(--mint-50); padding: 13px 13px 11px 43px; }
.rc-classe:has(input:checked) input { left: 13px; top: 15px; }
.rc-classe:has(input:focus-visible) { outline: 3px solid var(--green-jasper); outline-offset: 2px; }
.rc-classe-tete { display: flex; flex-direction: column; gap: 2px; }
.rc-classe-nom { font-weight: 800; color: var(--green-jasper); }
.rc-classe-prix { font-size: 1.35rem; font-weight: 800; color: var(--green-jasper); white-space: nowrap; }
.rc-classe-prix small { font-size: .78rem; font-weight: 600; }
.rc-classe-info { font-size: .84rem; }
.rc-classe-pol { font-size: .8rem; font-weight: 700; }
.rc-classe-pol.is-ok { color: var(--green-700); }
.rc-classe-pol.is-hors { color: #8a5d00; }
.rc-classe.is-absente { cursor: default; padding-left: 14px; color: var(--ink-muted); }
.intro-card .rc-pour { font-size: .86rem; margin: 0 0 8px; }
.rc-detail { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 0 0 10px; }
.rc-detail th, .rc-detail td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rc-detail th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.intro-card .rc-note { font-size: .84rem; margin: 0 0 8px; }
.intro-card .rc-erreur { color: var(--sncf-red); font-weight: 700; font-size: .88rem; margin: 0 0 8px; }
.intro-card.modale-complet .modale-actions { justify-content: flex-end; margin-top: 14px; }
.panel .rc-classes { margin-bottom: 16px; }
@media (max-width: 640px) {
  .rc-etapes, .cx-etapes, .rc-tuiles { grid-template-columns: 1fr; }
}

/* Réserver même complet : fin de la surveillance, points à cocher */
.veille-fin { font-size: .92rem; margin: 2px 0 0; }
.veille-fin .mi { color: var(--green-600); margin-right: 4px; vertical-align: -3px; }
.veille-consigne { font-size: .9rem; margin: -6px 0 14px; }
.veille-cas > label {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border-radius: var(--radius); padding: 13px 16px; border: 2px solid transparent;
  font-size: .9rem; line-height: 1.55;
}
.veille-cas > label input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green-pine); }
.veille-cas > label:has(input:checked) { border-color: currentColor; }
.veille-cas > label:has(input:focus-visible) { outline: 3px solid var(--green-jasper); outline-offset: 2px; }
.veille-cas .info { background: #eef2f0; color: var(--ink); }
.veille-envoi { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.veille-reste { margin: 0; font-size: .9rem; font-weight: 700; color: #8a5d00; }
.veille-trop-tard { display: flex; gap: 14px; align-items: flex-start; background: #fdf3e8; border-color: #f3dca4; color: #7a4614; }
.veille-trop-tard > .mi { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.veille-trop-tard strong { display: block; margin-bottom: 4px; }
.veille-trop-tard p { margin: 0 0 14px; }

/* Réserver même complet : la confirmation, en carte resserrée */
.veille-confirm {
  max-width: 680px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 34px 26px;
}
.veille-confirm .confirm-mark { width: 60px; height: 60px; margin: 0 auto 14px; }
.veille-confirm .confirm-mark .mi { width: 28px; height: 28px; }
.veille-confirm h2 { font-size: 1.4rem; font-weight: 800; color: var(--green-jasper); }
.veille-confirm .vc-sous { margin: 4px 0 20px; font-size: .95rem; }
.vc-train {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--green-opaline); border-radius: var(--radius); padding: 12px 16px;
}
.vc-train > .mi { width: 22px; height: 22px; color: var(--green-700); flex-shrink: 0; }
.vc-train strong { display: block; color: var(--green-jasper); font-weight: 800; }
.vc-train span:not(.mi) { display: block; font-size: .9rem; }
.vc-lignes { text-align: left; margin: 14px 0 0; }
.vc-lignes > div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.vc-lignes dt { color: var(--ink-muted); }
.vc-lignes dd { margin: 0; font-weight: 600; color: var(--green-jasper); }
.vc-classes { width: 100%; border-collapse: collapse; text-align: left; margin: 16px 0 0; font-size: .92rem; }
.vc-classes th, .vc-classes td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.vc-classes thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); background: var(--mint-50); }
.vc-classes tbody th { font-weight: 800; color: var(--green-jasper); }
.vc-classes small { font-size: .8rem; color: var(--ink-muted); }
.veille-confirm .demo-note { margin: 18px 0 16px; }
.vc-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .veille-confirm { padding: 24px 18px; }
  .vc-lignes > div { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================== Panier ================================= */
.mi-cart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E"); }

/* En-tête : l'icône, son libellé et le nombre d'articles */
.nav-links a.nav-panier { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.nav-panier .mi { width: 22px; height: 22px; }
.nav-panier-nb {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--mint-400); color: var(--green-900); font-size: .75rem; font-weight: 800;
}
.nav-panier-nb[hidden] { display: none; }

/* Page Panier */
.panier-article {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.panier-article:first-child { padding-top: 0; }
.panier-article:last-child { border-bottom: 0; padding-bottom: 0; }
.pa-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--green-opaline); color: var(--green-700); }
.pa-ico .mi { width: 22px; height: 22px; }
.pa-corps strong { display: block; font-size: 1.02rem; color: var(--green-jasper); }
.pa-corps span:not(.badge):not(.sr-only) { display: block; font-size: .9rem; line-height: 1.5; }
.pa-corps .badge { margin-top: 6px; }
.pa-prix { text-align: right; }
.pa-prix strong { display: block; font-size: 1.15rem; font-weight: 800; color: var(--green-jasper); white-space: nowrap; }
.pa-prix .lien { font-size: .86rem; margin-top: 6px; }
.panier-vide { text-align: center; padding: 22px 10px; }
.panier-vide > .mi { width: 40px; height: 40px; color: var(--green-600); margin-bottom: 10px; }
.panier-vide p { margin: 0 0 16px; }
.panier-total .summary-total { margin-top: 6px; }
.panier-total .btn + .btn { margin-top: 12px; }
.card-ajout { margin: 12px 0 0; font-size: .9rem; font-weight: 600; color: var(--green-700); }

/* Récapitulatif : les règles de l'Admin qui s'appliquent au voyage */
.recap-regles { list-style: none; display: grid; gap: 8px; margin: 6px 0 0; padding: 14px 16px; background: var(--mint-50); border-radius: var(--radius); }
.recap-regles li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.5; }
.recap-regles .mi { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--green-600); }
.fare-hors { display: block; margin-top: 4px; font-size: .72rem; font-weight: 800; color: #8a5d00; }
.pa-raison { font-size: .82rem !important; color: #8a5d00; margin-top: 2px; }
.panier-paiement { margin: 14px 0 12px; }
.panier-paiement select { width: 100%; font-size: .86rem; }
.panier-valid { font-size: .86rem; font-weight: 600; color: #8a5d00; margin: 0 0 14px; }
.valid-attente { font-size: .9rem; background: #fff8e8; color: #7a4614; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 10px; }

/* =========================== Mes voyages : recherche ================== */
.voy-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.voy-recherche { position: relative; flex: 1 1 280px; min-width: 240px; }
.voy-recherche .mi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-muted); }
.voy-recherche input {
  width: 100%; height: 44px; padding: 0 16px 0 42px;
  font: inherit; font-size: .95rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
}
.voy-recherche input:focus { border-color: var(--green-600); outline: none; box-shadow: 0 0 0 3px rgba(10,112,109,.15); }
.voy-date { display: flex; align-items: center; gap: 8px; }
.voy-date label { font-size: .88rem; font-weight: 700; color: var(--green-jasper); }
.voy-date input {
  height: 44px; padding: 0 12px; font: inherit; font-size: .9rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff;
}
.voy-outils .btn { height: 44px; }

/* Interrupteur « Archivés » */
.voy-archives { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: #eef2f0; }
.voy-archives input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voy-archives .interrupteur { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #c9d6d3; transition: background .2s; flex-shrink: 0; }
.voy-archives .interrupteur::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.voy-archives input:checked + .interrupteur { background: var(--green-pine); }
.voy-archives input:checked + .interrupteur::after { transform: translateX(16px); }
.voy-archives input:focus-visible + .interrupteur { outline: 3px solid var(--green-jasper); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .voy-archives .interrupteur, .voy-archives .interrupteur::after { transition: none; } }

.voy-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 34px; margin-bottom: 6px; }
.voy-nb { margin: 0; font-size: .9rem; font-weight: 600; color: var(--green-jasper); }
.voy-nb:focus { outline: none; }
.voy-dv { display: block; font-weight: 800; color: var(--green-jasper); white-space: nowrap; }
.voy-ref { display: block; font-size: .78rem; color: var(--ink-muted); white-space: nowrap; }
.voy-ref .badge { margin-left: 4px; padding: 1px 8px; font-size: .7rem; }
.seg-nb { font-weight: 600; font-size: .85em; opacity: .8; }

/* Pagination : « 1 2 3 … 8 » */
.pager { display: flex; align-items: center; gap: 4px; }
.pager:empty { display: none; }
.pager button {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--radius-sm);
  font: inherit; font-size: .92rem; font-weight: 700; color: var(--green-jasper);
  background: transparent; border: 0; cursor: pointer;
}
.pager button:hover:not(:disabled) { background: var(--mint-50); }
.pager button.active { background: var(--green-pine); color: #fff; }
.pager button:disabled { color: #c9d6d3; cursor: default; }
.pager-trous { padding: 0 4px; color: var(--ink-muted); }
.pager-bas { justify-content: center; margin-top: 16px; }

.panel[data-tour="billets"] td:nth-child(6) { white-space: nowrap; }

/* Achat d'une carte : type d'achat, début de validité, code avantage */
.carte-type { border: 0; padding: 0; margin: 0; min-width: 0; }
.carte-type legend { font-weight: 700; font-size: .9rem; color: var(--green-jasper); margin-bottom: 8px; padding: 0; }
.obligatoire { color: var(--sncf-red); }
.carte-type-choix { display: flex; gap: 10px; flex-wrap: wrap; }
.choix-pill { position: relative; cursor: pointer; }
.choix-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-pill span {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-weight: 700; font-size: .92rem; color: var(--green-jasper);
}
.choix-pill input:checked + span { background: var(--green-pine); border-color: var(--green-pine); color: #fff; }
.choix-pill input:focus-visible + span { outline: 3px solid var(--green-jasper); outline-offset: 2px; }
.choix-pill input:disabled + span { opacity: .45; cursor: not-allowed; }
.carte-code { max-width: 460px; }
.carte-code input { text-transform: uppercase; }
.carte-code input.is-erreur { border-color: var(--sncf-red); }
.champ-legende { font-size: .8rem; color: var(--ink-muted); margin: -4px 0 14px; }
.champ-legende span { color: var(--sncf-red); }

/* Mes connexions : outils reliés au portail */
.cx-etapes { margin: 0 0 4px; }
.cx-etapes li { background: #fff; border: 1px solid var(--line); flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; }
.cx-etapes li span { flex-shrink: 0; }
.cx-cat + .cx-cat { margin-top: 26px; }
.cx-cat h3 { font-size: 1.02rem; margin: 0 0 2px; color: var(--green-jasper); }
.cx-cat-aide { font-size: .88rem; margin: 0 0 12px; }
.cx-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 12px; }
.cx-outil {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px; background: #fff;
}
.cx-outil.is-connecte { border-color: var(--mint-400); background: var(--mint-50); }
.cx-tete { display: flex; align-items: flex-start; gap: 12px; }
.cx-mono {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--mint-100); color: var(--green-jasper); font-weight: 800; font-size: 1.1rem;
}
.cx-corps { flex: 1; min-width: 0; }
.cx-corps h4 { font-size: .98rem; margin: 0; color: var(--green-jasper); }
.cx-corps p { font-size: .82rem; margin: 2px 0 0; line-height: 1.4; }
.cx-corps .cx-mode { font-weight: 700; color: var(--green-700); overflow-wrap: anywhere; }
.cx-pied { display: flex; align-items: center; gap: 8px; }
.cx-pied .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: .76rem; }
.cx-pied .btn { margin-left: auto; padding: 0 16px; font-size: .92rem; height: 38px; }
.cx-journal td:first-child { white-space: nowrap; }
.cx-groupe { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.cx-groupe legend { font-weight: 800; color: var(--green-jasper); margin-bottom: 8px; font-size: .95rem; padding: 0; }
.cx-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cx-conseil {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--mint-100); color: var(--green-700); font-size: .7rem; font-weight: 800; vertical-align: 1px;
}
.cx-case { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; margin: 0 0 8px; cursor: pointer; }
.cx-case input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--green-pine); }
.intro-card .cx-actions { justify-content: flex-end; margin-top: 14px; }
.cx-resume { margin: 0 0 12px; }
.cx-resume div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.cx-resume dt { font-weight: 700; color: var(--green-jasper); }
.cx-resume dd { margin: 0; }
.intro-card .cx-test { font-size: .88rem; font-weight: 700; color: var(--green-700); margin: 0 0 4px; }
@media (max-width: 640px) {
  .cx-modes { grid-template-columns: 1fr; }
  .cx-resume div { grid-template-columns: 1fr; gap: 2px; }
}

/* Admin › Utilisateurs : ajout en masse (fichier ou tableau en ligne) */
.u-tag { margin-left: 4px; padding: 1px 8px; font-size: .7rem; vertical-align: 1px; }
.masse-onglets { margin: 0; }
.masse-onglets button { padding: 8px 18px; font-size: .9rem; }
.depot {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border: 2px dashed var(--mint-400); border-radius: var(--radius-lg, 14px);
  background: var(--mint-50); padding: 28px 20px; transition: background .15s ease, border-color .15s ease;
}
.depot.is-survol { background: var(--mint-100); border-color: var(--green-600); }
.depot strong { font-size: 1.05rem; color: var(--green-jasper); }
.depot > span:not(.mi) { font-size: .88rem; }
.depot small { font-size: .82rem; }
.depot-ico { width: 34px; height: 34px; color: var(--green-600); }
.masse-source { font-size: .9rem; font-weight: 700; color: var(--green-700); margin: 0 0 12px; }
.tableur { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 760px; table-layout: fixed; }
.tableur th:nth-child(1) { width: 34px; }
.tableur th:nth-child(2) { width: 10%; }
.tableur th:nth-child(3) { width: 11%; }
.tableur th:nth-child(4) { width: 25%; }
.tableur th:nth-child(5) { width: 14%; }
.tableur th:nth-child(6) { width: 14%; }
.tableur th:nth-child(7) { width: 122px; }
.tableur th:nth-child(8) { width: 42px; }
.tableur th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.tableur td { padding: 3px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tableur .tableur-num { width: 34px; text-align: center; color: var(--ink-muted); font-weight: 700; font-size: .8rem; }
.tableur input {
  width: 100%; height: 34px; padding: 0 8px; font: inherit; font-size: .88rem;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink);
}
.tableur input:hover { border-color: var(--line); }
.tableur input:focus { outline: none; border-color: var(--mint-500); background: #fff; box-shadow: 0 0 0 2px var(--mint-100); }
.tableur td.is-erreur input { border-color: var(--sncf-red); background: #fff5f7; }
.tableur-etat { font-size: .8rem; line-height: 1.3; }
.tableur-pret { color: var(--green-700); font-weight: 700; white-space: nowrap; }
.tableur-ko { color: var(--sncf-red); font-weight: 700; }
.tableur-defaut { display: block; color: var(--ink-muted); }
.tableur .icon-btn { width: 32px; height: 32px; }
.tableur-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.tableur-pied .btn { height: 36px; font-size: .9rem; padding: 0 14px; }
.tableur-pied .btn .mi { width: 16px; height: 16px; }
.tableur-bilan { font-size: .9rem; }
.masse-ok { font-size: .92rem; font-weight: 700; color: var(--green-700); margin: 12px 0 0; }
.masse-ok a { color: var(--green-jasper); }

/* Admin › Annuaire : synchronisation avec l'annuaire de l'organisation */
.annuaire-groupe { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.annuaire-groupe legend { font-weight: 800; color: var(--green-jasper); margin-bottom: 10px; font-size: .95rem; padding: 0; }
.annuaire-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; }
.annuaire-groupe .checkbox { margin: 0 0 8px; }
.annuaire-nom-groupe {
  display: block; width: 100%; max-width: 320px; height: 40px; padding: 0 12px; margin: 0 0 10px 26px;
  font: inherit; font-size: .92rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.annuaire-nom-groupe:disabled { background: #f3f6f5; color: var(--ink-muted); }
.annuaire-champs td:first-child { font-weight: 700; color: var(--green-jasper); white-space: nowrap; }
.annuaire-champs td, .annuaire-champs th { padding: 10px 12px; }
.annuaire-invit { display: flex; align-items: flex-end; padding-bottom: 10px; }
.annuaire-statut {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 18px;
  background: var(--mint-50); border: 1.5px solid var(--mint-400); border-radius: var(--radius);
}
.annuaire-statut > .mi { width: 22px; height: 22px; color: var(--green-600); margin-top: 1px; }
.annuaire-statut strong { display: block; color: var(--green-jasper); }
.annuaire-statut span { font-size: .88rem; }
.annuaire-sous-titre { font-size: 1rem; margin: 0 0 6px; color: var(--green-jasper); }
.annuaire-journal td:first-child { white-space: nowrap; }
@media (max-width: 640px) {
  .annuaire-nom-groupe { margin-left: 0; }
}