/* ==========================================================================
   Plaque-immat.fr — feuille de style v2 (Bootstrap 5.3)
   Identité : l'objet plaque lui-même. Bleu de la bande européenne,
   jaune des étoiles, asphalte pour les fonds sombres, typographie
   condensée proche des caractères bâton réglementaires.
   ========================================================================== */

:root {
  --pi-ink: #1d2733;          /* asphalte */
  --pi-ink-soft: #4a5666;
  --pi-blue: #1559b7;         /* bleu de marque : bandes de la plaque, boutons, liens */
  --pi-blue-dark: #0f4590;
  --pi-yellow: #ffcc00;       /* étoiles UE : réservé à la plaque */
  --pi-action: var(--pi-blue);
  --pi-action-dark: var(--pi-blue-dark);
  --pi-focus: #8ab8f5;
  --pi-surface: #eef1f5;
  --pi-line: #e0e5eb;
  --pi-line-strong: #c9d1db;
  --pi-white: #ffffff;
  --pi-silver: #c9cdd2;

  --pi-font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pi-font-display: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* une seule famille, largeur normale */

  --pi-radius: 12px;
  /* Hauteur de l'en-tête collant : les blocs collants se placent dessous */
  --pi-sticky-top: calc(70px + 1.25rem);
  --pi-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --pi-plate-h: 72px;

  /* Bootstrap */
  --bs-body-font-family: var(--pi-font);
  --bs-body-color: var(--pi-ink);
  --bs-body-bg: var(--pi-white);
  --bs-link-color: var(--pi-blue);
  --bs-link-color-rgb: 21, 89, 183;
  --bs-link-hover-color: var(--pi-blue-dark);
  --bs-link-hover-color-rgb: 15, 69, 144;
  --bs-primary: var(--pi-blue);
  --bs-primary-rgb: 21, 89, 183;
  --bs-border-color: var(--pi-line);
}

body {
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .section-title {
  font-family: var(--pi-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
}

:focus-visible {
  outline: 3px solid var(--pi-focus);
  outline-offset: 2px;
}

/* ── En-tête ────────────────────────────────────────────────────────── */
.site-header {
  background: var(--pi-white);
  border-bottom: 1px solid var(--pi-line);
}
.site-header .navbar { padding-block: .6rem; }
.site-header .navbar-brand { margin-right: .5rem; }
.site-header .navbar-brand img { height: 40px; width: auto; display: block; }
@media (max-width: 575.98px) {
  .site-header .navbar-brand img { height: 28px; }
  .site-header .navbar > .container { flex-wrap: nowrap; }
  .site-header .nav-link.active { box-shadow: inset 3px 0 0 var(--pi-blue); }
  .site-header .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; background: var(--pi-white); padding: 0 1rem .75rem; border-bottom: 1px solid var(--pi-line); }
}
.site-header .nav-link {
  font-weight: 500;
  color: var(--pi-ink);
  padding-inline: .9rem !important;
  border-radius: 6px;
}
.site-header .nav-link:hover { color: var(--pi-blue); }
.site-header .nav-link.active {
  color: var(--pi-blue);
  box-shadow: inset 0 -3px 0 var(--pi-blue);
  border-radius: 0;
}
.site-header .navbar-toggler { border-color: var(--pi-line); }
.btn-cart,
.btn-account {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  color: var(--pi-ink);
  border: 1px solid var(--pi-line);
  border-radius: 999px;
  padding: .4rem .9rem;
}
.btn-cart:hover,
.btn-account:hover,
.btn-account.show { border-color: var(--pi-blue); color: var(--pi-blue); }
.btn-cart .bi { font-size: 1.1rem; }

/* ── Héros ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  color: var(--pi-white);
  background:
    linear-gradient(100deg, rgba(14, 20, 28, .86) 0%, rgba(14, 20, 28, .62) 50%, rgba(14, 20, 28, .3) 85%),
    var(--hero-img, none) center / cover no-repeat,
    var(--pi-ink);
  padding-block: clamp(2rem, 4.5vw, 3.75rem);
}
.hero-inner { max-width: 44rem; }
/* Ombre douce sous le texte : il reste lisible même sur une zone claire de la photo. */
.hero-title, .hero-sub { text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.hero-title {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, .82);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

/* ── La plaque (élément signature) ─────────────────────────────────── */
.plaque-label {
  display: block;
  font-weight: 600;
  margin-bottom: .6rem;
}
.plaque-row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.plaque-col { flex: 1 1 auto; min-width: 0; }
.plaque {
  position: relative;
  display: flex;
  height: var(--pi-plate-h);
  background: var(--pi-white);
  border: 1px solid #c9d1db; /* bordure gris clair (l'ancien contour noir était trop marqué) */
  border-radius: 8px;
  box-shadow: 0 8px 20px -12px rgba(16, 24, 40, .35);
  overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.plaque:focus-within {
  border-color: var(--pi-focus);
  box-shadow: 0 0 0 3px rgba(138, 184, 245, .45), 0 8px 20px -12px rgba(16, 24, 40, .35);
}
.plaque-band {
  flex: 0 0 54px;
  background: var(--pi-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--pi-white);
}
.plaque-stars { width: 30px; height: 30px; }
.plaque-country {
  font-family: var(--pi-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 1px;
}
/* Coche dans la bande de droite quand le numéro est complet */
.plaque-band--dept::after {
  font-family: "bootstrap-icons";
  content: "\f26a";
  font-size: 1.5rem;
  color: var(--pi-white);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
}
.plaque.is-complete .plaque-band--dept::after { opacity: 1; transform: none; }

.plaque-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--pi-font-display);
  font-weight: 600;
  /* Taille liée à la hauteur de la plaque : les caractères occupent la plaque comme en vrai */
  font-size: calc(var(--pi-plate-h) * .58);
  line-height: 1;
  letter-spacing: .03em;
  color: #111821;
  /* Barlow porte ses capitales un peu bas : léger rehaussement pour un centrage optique */
  padding: 0 .5rem .1em;
}
.plaque-input:focus { outline: none; }
/* Exemple plus petit et plus clair que la saisie : on voit que c'est un modèle à remplacer */
.plaque-input::placeholder { color: #b9c0c9; }

.plaque--collection { background: #121212; border-color: #8a9097; }
.plaque--collection .plaque-input { color: var(--pi-silver); }
.plaque--collection .plaque-input::placeholder { color: #707070; }

.plaque-hint {
  margin: .75rem 0 0;
  font-size: .95rem;
  color: var(--pi-ink-soft);
  min-height: 1.5em;
}
.plaque-hint.is-valid { color: var(--pi-blue); font-weight: 500; }
.plaque-hint.is-invalid, .hero .plaque-hint.is-invalid { color: #b42318; }
/* Héros : la saisie dans une carte claire posée sur la photo. La plaque et le bouton sont
   empilés, le bleu du bouton ne touche plus la bande bleue de la plaque. */
.hero .plaque-form {
  max-width: 30rem;
  padding: 1.15rem 1.15rem 1.25rem;
  color: var(--pi-ink);
  /* Verre dépoli : la photo transparaît sans brouiller la saisie. */
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 16px;
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .7);
  /* saturate(.6) : la couleur du champ derrière ne teinte plus la carte (plus de beige). */
  -webkit-backdrop-filter: blur(10px) saturate(.6);
  backdrop-filter: blur(10px) saturate(.6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .plaque-form { background: rgba(255, 255, 255, .94); }
}
.hero .plaque-label { font-size: .9rem; font-weight: 600; color: var(--pi-ink); margin-bottom: .55rem; }
.hero .plaque-row { flex-direction: column; align-items: stretch; gap: .85rem; }
.hero .plaque { box-shadow: 0 8px 18px -12px rgba(16, 24, 40, .55); }
.hero .plaque:focus-within { box-shadow: 0 0 0 4px var(--pi-focus), 0 8px 18px -12px rgba(16, 24, 40, .55); }
.hero .plaque-hint { margin-top: .45rem; font-size: .85rem; font-weight: 500; min-height: 1.3em; color: var(--pi-ink); }
.hero .plaque-hint.is-valid { color: var(--pi-blue); }
.hero .btn-cta { width: 100%; height: 3.25rem; font-size: 1.1rem; box-shadow: none; }
.plaque-hint.is-valid::before { content: "\2713\00a0"; }

.btn-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding-inline: 1.75rem;
  font-family: var(--pi-font);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .005em;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
  color: var(--pi-white);
  background: var(--pi-action);
  border: 0;
  border-radius: 8px;
  height: var(--pi-plate-h);
  transition: background-color .15s ease;
}
.btn-cta:hover,
.btn-cta:focus-visible { background: var(--pi-action-dark); color: var(--pi-white); }
.btn-cta:active { transform: translateY(1px); }

/* Le seul mouvement non déclenché : la plaque se pose au chargement. */
@media (prefers-reduced-motion: no-preference) {
  .plaque-form .plaque-row { animation: plaque-pose .6s cubic-bezier(.2, .8, .2, 1) .1s both; }
  @keyframes plaque-pose {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 575.98px) {
  :root { --pi-plate-h: 64px; }
  .plaque-row { flex-direction: column; align-items: stretch; }
  .plaque-hint { margin-top: .5rem; }
  .plaque-band { flex-basis: 44px; }
  .plaque-stars { width: 24px; height: 24px; }
  .btn-cta { height: 56px; }
}

/* ── Réassurance ───────────────────────────────────────────────────── */
.assurances {
  background: var(--pi-white);
  border-bottom: 1px solid var(--pi-line);
}
.assurances-list {
  list-style: none;
  margin: 0;
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
}
.assurances-list li {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.assurances-list .bi {
  font-size: 1.75rem;
  color: var(--pi-blue);
  flex: 0 0 auto;
}
.assurances-list strong { display: block; font-weight: 600; line-height: 1.25; }
.assurances-list span { font-size: .925rem; color: var(--pi-ink-soft); }
.assurances-list span span { font-size: inherit; color: inherit; }
.assurance-court { display: none; }
@media (max-width: 575.98px) {
  .assurance-long { display: none; }
  .assurance-court { display: inline; }
  .assurances-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .75rem; }
  .assurances-list li { gap: .6rem; min-width: 0; }
  .assurances-list .bi { font-size: 1.45rem; }
  .assurances-list strong { font-size: .95rem; white-space: nowrap; }
  .assurances-list span { font-size: .85rem; white-space: nowrap; }
}
/* Très petits écrans : icône au-dessus du texte, pour garder chaque libellé sur une ligne. */
@media (max-width: 389.98px) {
  .assurances-list li { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

@media (min-width: 992px) {
  .assurances-list { grid-template-columns: repeat(4, 1fr); }
  .assurances-list li + li { border-left: 1px solid var(--pi-line); padding-left: 1.5rem; }
}

/* ── Sections ──────────────────────────────────────────────────────── */
.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section-title { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 1.75rem; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1.75rem;
}
.section-head .section-title { margin-bottom: 0; }
.link-more { font-weight: 600; text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* ── Étapes : reliées par un marquage au sol ───────────────────────── */
.etapes { background: var(--pi-surface); }
.etapes-list {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.etapes-list li {
  counter-increment: etape;
  position: relative;
  padding-left: 4rem;
}
.etapes-list li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -.35rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font-family: var(--pi-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--pi-white);
  background: var(--pi-blue);
  border-radius: 50%;
}
.etapes-list h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.etapes-list p { margin: 0; color: var(--pi-ink-soft); max-width: 22rem; }

@media (min-width: 992px) {
  .etapes-list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .etapes-list li { padding-left: 0; padding-top: 4rem; }
  .etapes-list li::before { top: 0; }
  /* pointillés « ligne de route » entre les pastilles */
  .etapes-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.33rem;
    left: 3.5rem;
    right: -1.75rem;
    height: 4px;
    background: repeating-linear-gradient(90deg, #a9bfe3 0 22px, transparent 22px 38px);
  }
}

/* ── Gammes ────────────────────────────────────────────────────────── */
.gamme {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem;
  color: var(--pi-ink);
  text-decoration: none;
  background: var(--pi-white);
  border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius);
  transition: border-color .15s ease;
}
.gamme:hover,
.gamme:focus-visible { border-color: var(--pi-blue); color: var(--pi-ink); }
.gamme-nom {
  font-family: var(--pi-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: 1.1rem;
}
.gamme-texte { font-size: .95rem; color: var(--pi-ink-soft); margin-top: .25rem; flex: 1 1 auto; }
.gamme-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--pi-line);
}
.gamme-prix { font-weight: 600; color: var(--pi-blue); }
.gamme-dim { font-size: .85rem; color: var(--pi-ink-soft); white-space: nowrap; }

/* Plaques miniatures : un aperçu du matériau plutôt qu'une icône */
.mini-plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 52px;
  font-family: var(--pi-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .05em;
  line-height: 1.05;
  color: #111821;
  background: var(--pi-white);
  border: 2px solid var(--pi-ink);
  border-left: 14px solid var(--pi-blue);
  border-right: 14px solid var(--pi-blue);
  border-radius: 5px;
}
.mini-plaque--alu { background: linear-gradient(180deg, #ffffff, #eceff2); }
.mini-plaque--plexi { background: linear-gradient(160deg, #ffffff 0 45%, #f1f4f8 46% 60%, #ffffff 61%); }
.mini-plaque--design {
  background:
    repeating-linear-gradient(135deg, rgba(21, 89, 183, .07) 0 6px, transparent 6px 12px),
    var(--pi-white);
}
.mini-plaque--collection {
  color: var(--pi-silver);
  background: #121212;
  border: 2px solid var(--pi-silver);
}
.mini-plaque--moto {
  width: 84px;
  font-size: 1rem;
  border-right-width: 2px;
  border-right-color: var(--pi-ink);
}
/* Plexiglas (standard, design, moto) : pas de rebord noir en vrai, filet gris clair comme la plaque de saisie */
.mini-plaque--plexi,
.mini-plaque--design,
.mini-plaque--moto {
  border-top-width: 0;
  border-bottom-width: 0;
  box-shadow: 0 0 0 1px #c9d1db, 0 6px 14px -10px rgba(16, 24, 40, .35);
}
.mini-plaque--moto { border-right-width: 0; }

/* Mobile : les gammes défilent horizontalement plutôt que de s'empiler */
@media (max-width: 575.98px) {
  .gammes-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    scrollbar-width: thin;
  }
  .gammes-row > [class*="col"] { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { background: var(--pi-surface); }
.faq-intro p { color: var(--pi-ink-soft); }
@media (min-width: 992px) {
  .faq-intro { position: sticky; top: var(--pi-sticky-top); }
}
.faq-accordion {
  --bs-accordion-bg: var(--pi-white);
  --bs-accordion-border-color: var(--pi-line);
  --bs-accordion-border-radius: var(--pi-radius);
  --bs-accordion-inner-border-radius: calc(var(--pi-radius) - 1px);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--pi-focus);
  --bs-accordion-active-bg: var(--pi-white);
  --bs-accordion-active-color: var(--pi-blue);
  --bs-accordion-btn-padding-y: 1.1rem;
}
.faq-accordion .accordion-button {
  font-family: var(--pi-font);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
}
.faq-accordion .accordion-body { color: var(--pi-ink-soft); padding-top: 0; }
.faq-accordion .accordion-body p:last-child { margin-bottom: 0; }
.faq-accordion .accordion-body h3 {
  font-family: var(--pi-font);
  font-weight: 600;
  font-size: 1rem;
  color: var(--pi-ink);
  margin: 1.25rem 0 .4rem;
}

/* ── Avis ──────────────────────────────────────────────────────────── */
.avis { padding-block: 3rem; }

/* ── Fiche produit (pages de gamme) ────────────────────────────────── */
.produit-visuel {
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--pi-surface);
  border-radius: var(--pi-radius);
  text-align: center;
}
.produit-visuel img { border-radius: 6px; }
.produit-info { color: var(--pi-ink-soft); max-width: 38rem; }
.produit-points {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: .5rem 1.5rem;
}
@media (min-width: 576px) { .produit-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.produit-points li { display: flex; gap: .5rem; align-items: baseline; font-weight: 500; }
.produit-points .bi { color: var(--pi-blue); font-size: 1.15rem; flex: 0 0 auto; }
.produit-specs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1.75rem;
  border-top: 1px solid var(--pi-line);
  border-bottom: 1px solid var(--pi-line);
}
.produit-specs > div { flex: 1 1 10rem; padding: .9rem 1.25rem .9rem 0; }
.produit-specs > div + div { padding-left: 1.25rem; border-left: 1px solid var(--pi-line); }
.produit-specs dt { font-weight: 500; font-size: .875rem; color: var(--pi-ink-soft); }
.produit-specs dd { margin: 0; font-weight: 600; }
.btn-produit {
  --bs-btn-color: var(--pi-blue);
  --bs-btn-border-color: var(--pi-blue);
  --bs-btn-hover-bg: var(--pi-blue);
  --bs-btn-hover-border-color: var(--pi-blue);
  --bs-btn-active-bg: var(--pi-blue-dark);
  font-weight: 600;
  padding: .6rem 1.25rem;
}
@media (max-width: 575.98px) {
  .produit-specs > div { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .65rem 0; }
  .produit-specs > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--pi-line); }
}

/* Cible d'ancre : ne pas finir sous l'en-tête collant */
.plaque-input { scroll-margin-top: 12rem; }

/* ── Tunnel de commande ───────────────────────────────────────────── */
.tunnel {
  background: #f7f9fc; /* teinte très légère : distingue le fil d'étapes de l'en-tête blanc */
  border-bottom: 1px solid var(--pi-line);
  padding-block: .65rem;
}
.tunnel-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: .5rem;
  justify-content: space-between;
}
.tunnel-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 0;
  font-weight: 500;
  font-size: .925rem;
  color: var(--pi-ink-soft);
  white-space: nowrap;
}
.tunnel-step:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-inline: .5rem;
  background: var(--pi-line-strong);
  min-width: 1rem;
}
.tunnel-step.is-done:not(:last-child)::after { background: var(--pi-blue); }
.tunnel-step:last-child { flex: 0 0 auto; }
.tunnel-dot {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--pi-font);
  font-weight: 600;
  font-size: .8rem;
  border: 1.5px solid var(--pi-line-strong);
  color: var(--pi-ink-soft);
  background: var(--pi-white);
}
.tunnel-step.is-done .tunnel-dot { background: var(--pi-blue); border-color: var(--pi-blue); color: var(--pi-white); }
.tunnel-step.is-current .tunnel-dot { border-color: var(--pi-blue); color: var(--pi-blue); }
.tunnel-step.is-current { color: var(--pi-ink); font-weight: 600; }
.tunnel-step.is-done .tunnel-dot .bi { font-size: .9rem; }
.tunnel-step a { color: var(--pi-ink); text-decoration: none; }
.tunnel-step a:hover { color: var(--pi-blue); text-decoration: underline; }

.tunnel-mobile { align-items: center; gap: .75rem; }
.tunnel-back {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--pi-line);
  border-radius: 50%;
  color: var(--pi-ink);
  font-size: 1rem;
}
.tunnel-mobile-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.tunnel-mobile-label strong { font-weight: 600; }
.tunnel-mobile-label span { color: var(--pi-ink-soft); }
.tunnel-progress { height: 3px; background: var(--pi-line); border-radius: 2px; overflow: hidden; }
.tunnel-progress span { display: block; height: 100%; background: var(--pi-blue); }

.tunnel-main {
  background: var(--pi-surface);
  padding-block: clamp(1rem, 2.4vw, 1.75rem) clamp(2rem, 5vw, 3.5rem);
}
.tunnel-card {
  background: var(--pi-white);
  border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius);
  box-shadow: var(--pi-shadow-card);
  padding: clamp(1rem, 2.6vw, 1.5rem);
}
.tunnel-card--narrow { max-width: 46rem; margin-inline: auto; }
.tunnel-title {
  font-family: var(--pi-font);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin-bottom: .3rem;
}
.tunnel-lead { color: var(--pi-ink-soft); max-width: 40rem; margin-bottom: 1rem; font-size: .9rem; line-height: 1.45; }
.tunnel-notes {
  list-style: none;
  padding: 1rem 0 0;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--pi-line);
  display: grid;
  gap: .45rem;
  font-size: .9rem;
  color: var(--pi-ink-soft);
}
.tunnel-notes li { display: flex; gap: .6rem; align-items: baseline; }
.tunnel-notes .bi { color: var(--pi-blue); }
/* Plaque sur fond clair : l'ombre portée est plus légère */
.tunnel-card .plaque { box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .45); }
.tunnel-card .plaque:focus-within { box-shadow: 0 0 0 4px var(--pi-focus), 0 8px 20px -12px rgba(0, 0, 0, .45); }
.tunnel-card .btn-cta { box-shadow: none; }

/* ── Configurateur (plaque.php) ───────────────────────────────────── */
.config-bloc + .config-bloc { margin-top: 1.25rem; }
.tunnel-card.config-bloc { padding: clamp(1.15rem, 2.8vw, 1.75rem); }
.config-titre {
  font-family: var(--pi-font);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -.005em;
  line-height: 1.3;
  margin-bottom: 1.1rem;
}
/* Véhicule reconnu, sous l'aperçu de la plaque (récapitulatif) */
.config-vehicule { display: flex; align-items: center; gap: .65rem; margin: .1rem 0 .9rem; font-weight: 500; color: var(--pi-ink); }
.config-vehicule-logo { width: auto; height: 1.6rem; max-width: 3.5rem; object-fit: contain; }
/* Auto / Moto : choix posé hors carte, au-dessus des types de plaque */

.plaque-affiche {
  display: inline-block;
  padding: .1rem .75rem;
  font-family: var(--pi-font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: .05em;
  background: var(--pi-white);
  border: 1px solid var(--pi-ink);
  border-left: 10px solid var(--pi-blue);
  border-right: 10px solid var(--pi-blue);
  border-radius: 4px;
}
.config-modele { color: var(--pi-ink-soft); font-weight: 500; }

/* Bascule Auto / Moto */
.segmented {
  display: inline-flex;
  padding: .25rem;
  background: var(--pi-surface);
  border-radius: 999px;
}
.segmented-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .95rem;
  color: var(--pi-ink-soft);
  cursor: pointer;
  user-select: none;
}
.segmented-btn .bi { font-size: 1.05rem; }
.btn-check:checked + .segmented-btn { background: var(--pi-white); color: var(--pi-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.btn-check:focus-visible + .segmented-btn { outline: 3px solid var(--pi-focus); outline-offset: 1px; }
/* Auto / Moto posé sur le fond de page (hors carte) : pastille blanche, choix en bleu */
.segmented.segmented--vehicule { display: flex; width: max-content; max-width: 100%; margin-bottom: 1rem; background: var(--pi-white); border: 1px solid var(--pi-line); }
.segmented--vehicule .btn-check:checked + .segmented-btn { background: var(--pi-blue); color: var(--pi-white); box-shadow: none; }

/* Choix du modèle : la plaque posée sur une « scène », infos dessous.
   2 colonnes par défaut, une seule ligne quand la colonne est assez large
   (requête de conteneur : dépend de la place réelle, pas de l'écran). */
.config-bloc { container-type: inline-size; }
.choix-plaques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@container (min-width: 40rem) {
  .choix-plaques--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choix-plaques--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.choix-plaques[hidden] { display: none; }
.choix-plaque { min-width: 0; }
.choix-plaque > label {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--pi-line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--pi-white);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.choix-plaque > label:hover { border-color: #9fb6d9; box-shadow: 0 4px 14px -8px rgba(16, 24, 40, .25); }
.choix-plaque .btn-check:checked + label { border-color: var(--pi-blue); box-shadow: 0 0 0 1px var(--pi-blue), 0 6px 18px -10px rgba(21, 89, 183, .45); }
.choix-plaque .btn-check:focus-visible + label { outline: 3px solid var(--pi-focus); outline-offset: 2px; }

.choix-plaque-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 6.25rem;
  padding: 2rem .9rem 1rem;
  background: linear-gradient(180deg, #f3f6fa 0%, #e9eef4 100%);
  transition: background-color .15s ease;
}
.btn-check:checked + label .choix-plaque-scene { background: linear-gradient(180deg, #eef4fd 0%, #e1ebfa 100%); }
.choix-plaque-img { width: 100%; max-height: 3.4rem; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(16, 24, 40, .14)); }
.choix-plaque-badges { position: absolute; top: .55rem; left: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.badge-pi {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--pi-line);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pi-ink-soft);
}
.badge-pi--prix { background: #e8f5ee; border-color: #c4e5d2; color: #1a6b41; }
.choix-plaque-coche {
  position: absolute;
  top: .5rem;
  right: .55rem;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--pi-line-strong);
  background: var(--pi-white);
  color: transparent;
  font-size: .8rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-check:checked + label .choix-plaque-coche { background: var(--pi-blue); border-color: var(--pi-blue); color: var(--pi-white); }

.choix-plaque-corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: .7rem .85rem .8rem; }
.choix-plaque-nom { font-weight: 600; font-size: .975rem; line-height: 1.25; }
.choix-plaque-desc { font-size: .8rem; color: var(--pi-ink-soft); line-height: 1.35; margin-top: .1rem; }
.choix-plaque-meta { display: flex; align-items: baseline; gap: .3rem; margin-top: auto; padding-top: .55rem; }
.choix-plaque-meta strong { font-weight: 600; font-size: 1.05rem; color: var(--pi-ink); letter-spacing: -.01em; }
.choix-plaque-meta span { font-size: .75rem; color: var(--pi-ink-soft); }
.btn-check:checked + label .choix-plaque-meta strong { color: var(--pi-blue); }
.choix-plaque-dim { font-size: .72rem; color: #8a95a5; }
@media (prefers-reduced-motion: reduce) { .choix-plaque > label, .choix-plaque-coche { transition: none; } }

.config-perso { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pi-line); }
.config-perso[hidden], #blocDepartement[hidden], #blocPersoMsg[hidden] { display: none; }
.form-check-input:checked { background-color: var(--pi-blue); border-color: var(--pi-blue); }
.form-select:focus, .form-control:focus, .form-check-input:focus { border-color: var(--pi-blue); box-shadow: 0 0 0 .2rem rgba(21, 89, 183, .2); }

/* Aperçu + total */
.config-resume {
  background: var(--pi-white);
  border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius);
  box-shadow: var(--pi-shadow-card);
  padding: clamp(1rem, 2.6vw, 1.35rem);
}
@media (min-width: 992px) { .config-resume { position: sticky; top: var(--pi-sticky-top); } }
.config-apercu {
  background: var(--pi-surface);
  border-radius: 10px;
  padding: .85rem;
  text-align: center;
  margin-bottom: 1rem;
}
.config-apercu img { max-height: 8rem; }
.config-apercu .config-vehicule { justify-content: center; margin: .7rem 0 0; font-size: .925rem; }
.config-total { margin: 0 0 1rem; font-size: .95rem; }
.config-total > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.config-total > div[hidden] { display: none; }
.config-total dt { font-weight: 400; color: var(--pi-ink-soft); }
.config-total dd { margin: 0; font-weight: 500; white-space: nowrap; }
.config-total-final { border-top: 1px solid var(--pi-line); margin-top: .4rem; padding-top: .7rem !important; align-items: baseline; }
.config-total-final dt { color: var(--pi-ink); font-weight: 600; }
.config-total-final dd { font-size: 1.3rem; color: var(--pi-ink); font-weight: 600; letter-spacing: -.01em; }
.config-resume .btn-cta { height: 3rem; font-size: 1.05rem; box-shadow: none; }
.config-retour { display: block; text-align: center; margin-top: .8rem; font-weight: 500; font-size: .925rem; text-decoration: none; }
.config-retour:hover { text-decoration: underline; }

/* ── Options (options.php) ─────────────────────────────────────────── */
.config-titre-note { font-weight: 400; font-size: .825rem; color: var(--pi-ink-soft); margin-left: .35rem; }
/* Cartes de choix horizontales : visuel | nom + description | prix */
.choix-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: .6rem;
}
.choix-option { min-width: 0; }
.choix-option label {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: .85rem;
  row-gap: .15rem;
  align-items: start;
  height: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--pi-line-strong);
  border-radius: 10px;
  background: var(--pi-white);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.choix-option label:hover { border-color: #9fb6d9; }
.choix-option .btn-check:checked + label { border-color: var(--pi-blue); box-shadow: inset 0 0 0 1px var(--pi-blue); background: #f6f9fe; }
.choix-option .btn-check:focus-visible + label { outline: 3px solid var(--pi-focus); outline-offset: 2px; }
.choix-option-img { grid-row: 1 / span 2; align-self: center; width: 3.5rem; height: 3rem; object-fit: contain; margin: 0; }
.choix-option-nom { grid-column: 2; font-weight: 600; font-size: .975rem; line-height: 1.3; }
.choix-option-prix { grid-column: 3; grid-row: 1; margin: 0; font-weight: 600; font-size: .95rem; color: var(--pi-ink); white-space: nowrap; }
.choix-option-desc { grid-column: 2 / span 2; font-size: .85rem; line-height: 1.4; color: var(--pi-ink-soft); overflow-wrap: anywhere; }

.accessoire {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 0;
}
.accessoire + .accessoire { border-top: 1px solid var(--pi-line); }
.accessoire-img { width: 3.25rem; height: 3.25rem; object-fit: contain; flex: 0 0 auto; }
.accessoire-texte { flex: 1 1 auto; min-width: 0; }
.accessoire-nom { display: block; font-weight: 500; }
.accessoire-desc { font-size: .85rem; color: var(--pi-ink-soft); }
.accessoire-qte { flex: 0 0 11rem; }
@media (max-width: 575.98px) {
  .accessoire { flex-wrap: wrap; }
  .accessoire-qte { flex-basis: 100%; }
}
.garantie .form-check-label { padding-left: .35rem; }
.garantie-prix { font-weight: 600; margin-left: .35rem; }
.config-note { font-size: .85rem; color: var(--pi-ink-soft); margin: -.5rem 0 1rem; }

/* ── Livraison (livraison.php) ─────────────────────────────────────── */
.choix-livraison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .6rem; }
.choix-livraison .choix-option label { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
.choix-livraison-icone { grid-row: 1 / span 2; align-self: center; font-size: 1.4rem; color: var(--pi-blue); }
.segmented--sm .segmented-btn { padding: .4rem 1rem; font-size: .95rem; }

.pr-choisi {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--pi-blue);
  border-radius: 10px;
  background: #f6f9fe;
}
.pr-choisi[hidden], #prRecherche[hidden], .pr-resultats[hidden] { display: none; }
.pr-choisi > .bi { font-size: 1.5rem; color: var(--pi-blue); }
.pr-choisi strong { display: block; }
.pr-choisi span { font-size: .925rem; color: var(--pi-ink-soft); }
.pr-recherche { display: flex; gap: .75rem; }
.pr-recherche .btn-cta { height: auto; min-width: 0; font-size: 1rem; padding-inline: 1.25rem; box-shadow: none; }
@media (max-width: 575.98px) { .pr-recherche { flex-direction: column; } .pr-recherche .btn-cta { height: 3rem; } }
.pr-message { margin: .75rem 0 0; font-size: .925rem; color: var(--pi-ink-soft); min-height: 1.4em; }
.pr-resultats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: .5rem;
}
@media (min-width: 768px) { .pr-resultats { grid-template-columns: 1.1fr 1fr; } }
.pr-carte { height: 22rem; border-radius: var(--pi-radius); border: 1px solid var(--pi-line); background: var(--pi-surface); z-index: 0; }
/* PC / tablette : la carte prend exactement la hauteur de la liste (la pagination passe
   dessous, dans la colonne de droite). Leaflet se redimensionne via le ResizeObserver. */
@media (min-width: 768px) {
  .pr-resultats { grid-template-areas: "carte liste" ". pages"; row-gap: .6rem; }
  .pr-liste-bloc { display: contents; }
  .pr-carte { grid-area: carte; height: auto; min-height: 18rem; }
  .pr-liste { grid-area: liste; }
  .pr-pages { grid-area: pages; margin-top: 0; }
}
@media (max-width: 767.98px) { .pr-carte { height: 16rem; } }
.pr-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pi-line); border-radius: var(--pi-radius); }
/* Pagination de la liste (5 points par page, assets/v2/js/livraison.js) */
.pr-pages { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.pr-pages[hidden] { display: none; }
.pr-pages-btn {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .4rem .8rem;
  border: 1px solid var(--pi-line-strong); border-radius: 8px; background: var(--pi-white);
  font: inherit; font-size: .9rem; font-weight: 500; color: var(--pi-blue); cursor: pointer;
}
.pr-pages-btn:hover:not(:disabled) { background: #f3f7fd; border-color: var(--pi-blue); }
.pr-pages-btn:disabled { color: #b4bcc8; border-color: var(--pi-line); cursor: default; }
.pr-pages-btn:focus-visible { outline: 3px solid var(--pi-focus); outline-offset: 1px; }
.pr-pages-info { font-size: .875rem; color: var(--pi-ink-soft); white-space: nowrap; }
.pr-liste li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .8rem .9rem;
  cursor: pointer;
}
.pr-liste li + li { border-top: 1px solid var(--pi-line); }
.pr-liste li:hover { background: var(--pi-surface); }
.pr-liste li[aria-checked="true"] { background: #f3f7fd; box-shadow: inset 3px 0 0 var(--pi-blue); }
.pr-liste li:focus-visible { outline: 3px solid var(--pi-focus); outline-offset: -3px; }
.pr-radio {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .2rem;
  border: 1.5px solid var(--pi-line-strong);
  border-radius: 50%;
}
li[aria-checked="true"] .pr-radio { border: 5px solid var(--pi-blue); }
.pr-infos { flex: 1 1 auto; min-width: 0; font-size: .925rem; }
.pr-infos strong { display: block; font-size: .95rem; }
.pr-adresse { color: var(--pi-ink-soft); }
.pr-distance { flex: 0 0 auto; font-size: .825rem; color: var(--pi-ink-soft); white-space: nowrap; }
.pr-horaires { margin-top: .35rem; font-size: .825rem; }
.pr-horaires summary { color: var(--pi-blue); cursor: pointer; }
.pr-horaires dl { margin: .35rem 0 0; }
.pr-horaires dl div { display: flex; gap: .5rem; }
.pr-horaires dt { flex: 0 0 5.5rem; font-weight: 500; }
.pr-horaires dd { margin: 0; color: var(--pi-ink-soft); }

/* Suggestions d'adresses */
.adresse-suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  list-style: none;
  margin: .25rem 0 0;
  padding: .3rem 0;
  background: var(--pi-white);
  border: 1px solid var(--pi-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35);
}
.adresse-suggestions li { padding: .5rem .85rem; cursor: pointer; font-size: .95rem; }
.adresse-suggestions li:hover, .adresse-suggestions li[aria-selected="true"] { background: #f3f7fd; color: var(--pi-blue); }
.adresse-suggestions li.adresse-info { cursor: default; color: var(--pi-ink-soft); font-size: .9rem; }
.adresse-suggestions li.adresse-info:hover { background: none; color: var(--pi-ink-soft); }
/* Recherche d'adresse en cours : indicateur dans le champ (assets/v2/js/adresse.js) */
input[data-adresse].is-chargement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23d5dce6' stroke-width='3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9' fill='none' stroke='%231559b7' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.1rem; padding-right: 2.4rem; }
.col-12.position-relative .adresse-suggestions { left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5); }

/* ── Panier : lignes de plaques (plaque.php « Vos plaques » et verification.php) ── */
.recap-entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .85rem; }
.recap-entete .config-titre { margin-bottom: 0; }
.recap-lien {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 500;
  font-size: .9rem;
  color: var(--pi-blue);
  text-decoration: none;
  cursor: pointer;
}
.recap-lien:hover { text-decoration: underline; }
.recap-lien--danger { color: #b42318; }
.recap-lien--discret { color: var(--pi-ink-soft); }

.panier-liste { list-style: none; margin: 0; padding: 0; }
.panier-item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: .75rem 1.1rem;
  align-items: center;
  padding: 1rem 0;
}
.panier-item + .panier-item { border-top: 1px solid var(--pi-line); }
.panier-liste > .panier-item:first-child { padding-top: 0; }
.panier-item-visuel {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  padding: .45rem;
  background: linear-gradient(180deg, #f3f6fa 0%, #e9eef4 100%);
  border-radius: 10px;
}
.panier-item-visuel img { width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(16, 24, 40, .12)); }
.panier-item-nom { display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.panier-qte { padding: .05rem .45rem; border-radius: 999px; background: #eef3fb; color: var(--pi-blue); font-size: .78rem; font-weight: 600; }
.panier-item-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.panier-item-tags li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 6px;
  background: var(--pi-surface);
  font-size: .8rem;
  color: var(--pi-ink-soft);
  line-height: 1.5;
}
.panier-item-tags .bi { font-size: .8rem; opacity: .75; }
.panier-item-tags .tag-immat {
  background: var(--pi-white);
  border: 1px solid var(--pi-ink);
  border-left: 6px solid var(--pi-blue);
  border-right: 6px solid var(--pi-blue);
  border-radius: 4px;
  padding: 0 .45rem;
  font-family: var(--pi-font-display);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .05em;
  color: var(--pi-ink);
}
.panier-item-fin { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.panier-item-prix { font-weight: 600; font-size: 1.05rem; white-space: nowrap; letter-spacing: -.01em; }
.panier-item-actions { display: flex; gap: .3rem; }

/* Bouton secondaire discret : simple contour */
.btn-ligne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: 1.8rem;
  padding: 0 .6rem;
  border: 1px solid var(--pi-line);
  border-radius: 7px;
  background: var(--pi-white);
  color: var(--pi-ink-soft);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.btn-ligne--icone { width: 1.8rem; padding: 0; }
.btn-ligne .bi { font-size: .8rem; color: var(--pi-ink-soft); transition: color .15s ease; }
.btn-ligne:hover, .btn-ligne:focus-visible { border-color: var(--pi-blue); color: var(--pi-blue); background: #f6f9fe; }
.btn-ligne:hover .bi, .btn-ligne:focus-visible .bi { color: var(--pi-blue); }
.btn-ligne--danger:hover, .btn-ligne--danger:focus-visible { border-color: #d92d20; color: #b42318; background: #fef3f2; }
.btn-ligne--danger:hover .bi, .btn-ligne--danger:focus-visible .bi { color: #b42318; }

@media (max-width: 575.98px) {
  .panier-item { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .7rem .85rem; align-items: start; }
  .panier-item-fin { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: .1rem; }
  .panier-item-nom { flex-wrap: wrap; font-size: .95rem; margin-bottom: .35rem; }
}
.recap-entete .btn-ligne { align-self: center; }
.panier-ajout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  margin-top: .75rem;
  padding: .7rem;
  border: 1px dashed var(--pi-line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--pi-blue);
  font-weight: 500;
  font-size: .95rem;
}
.panier-ajout:hover { border-color: var(--pi-blue); background: #f6f9fe; }

.recap-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; font-size: .95rem; }
.recap-ligne + .recap-ligne { border-top: 1px solid var(--pi-line); }
.recap-ligne .recap-prix { font-weight: 500; white-space: nowrap; }
.recap-offert { color: #1a7f4b; font-weight: 500; }
.recap-sous-titre { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.recap-adresse { color: var(--pi-ink-soft); font-size: .9rem; line-height: 1.5; margin-bottom: .4rem; }
.recap-manquant { display: flex; gap: .5rem; align-items: baseline; margin: 0; color: #b42318; font-weight: 500; font-size: .95rem; }
.cgv { margin-bottom: .9rem; font-size: .875rem; color: var(--pi-ink-soft); }
.cgv { border-radius: 8px; transition: background-color .2s ease; scroll-margin-bottom: 6rem; }
.cgv.is-requis { background: #fff5f5; box-shadow: 0 0 0 .5rem #fff5f5; animation: cgv-secoue .4s ease 2; }
.cgv.is-requis .form-check-input { border-color: #c62828; box-shadow: 0 0 0 .2rem rgba(198, 40, 40, .18); }
.cgv-alerte { margin: .35rem 0 0; font-size: .85rem; font-weight: 500; color: #c62828; }
@keyframes cgv-secoue { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .cgv.is-requis { animation: none; } }
.config-paiement { margin: .7rem 0 0; text-align: center; font-size: .825rem; color: var(--pi-ink-soft); }
.config-paiement .bi { color: var(--pi-blue); margin-right: .3rem; }
.resume-points { list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--pi-line); display: grid; gap: .45rem; font-size: .85rem; color: var(--pi-ink-soft); }
.resume-points li { display: flex; gap: .5rem; align-items: baseline; }
.resume-points .bi { color: var(--pi-blue); }

/* ── Paiement (module commun paiement.php / complement.php) ─────────
   Reprise du module de cartegrise.net (hipay-stripe-v2.css + cartegrise.css),
   accent plaque-immat. Comportement :
   - l'iframe HiPay est quasi transparente tant que le champ n'a ni focus ni
     contenu : le placeholder n'apparaît qu'au clic ;
   - champ valide → vert ; nom du titulaire vert seulement quand tout le
     formulaire l'est (.user-validated), pour ne pas valider un nom prérempli ;
   - formulaire complet → bouton « Payer » qui pulse (.btn-pulse). */
:root {
  --pay-bg: #ffffff;
  --pay-border: #e0e4eb;
  --pay-border-valid: #16a34a;
  --pay-valid-bg: #f0fdf4;
  --pay-error: #e53e3e;
  --pay-accent: #1559b7;
  --pay-accent-dark: #0f4691;
  --pay-accent-rgb: 21, 89, 183;
  --pay-text-muted: #64748b;
  --pay-text-label: #94a3b8;
  --pay-radius: 10px;
  --pay-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --pay-transition: .18s cubic-bezier(.4, 0, .2, 1);
}

.payment-zone {
  background: #f8fafc;
  border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .payment-zone {
    background: #fff;
    border-color: rgba(var(--pay-accent-rgb), .3);
    box-shadow: 0 8px 32px rgba(var(--pay-accent-rgb), .12), 0 2px 8px rgba(var(--pay-accent-rgb), .06);
  }
}
.pay-section-header-wrap { border-bottom: 1px solid #edf1f6; }
.pay-section-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.pay-section-header-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #e8f0fb; color: var(--pay-accent); border-radius: 9px;
}
.pay-section-header-title { margin: 0; font-size: 15px; font-weight: 600; color: #0f172a; line-height: 1.2; }
.pay-section-header-sub { font-size: 12.5px; color: var(--pay-text-label); margin-top: 2px; }
.pay-body { padding: 1rem 1.25rem 1.5rem; }
@media (max-width: 575.98px) { .pay-body { padding: 1rem 1rem 1.25rem; } }

/* Apple Pay */
.applepay-bouton { min-height: 48px; }
.applepay-bouton apple-pay-button,
.applepay-bouton > * { display: block; width: 100%; --apple-pay-button-width: 100%; --apple-pay-button-height: 48px; --apple-pay-button-border-radius: 10px; }
.paiement-ou { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .25rem; color: var(--pay-text-label); font-size: .8rem; font-weight: 600; }
.paiement-ou::before, .paiement-ou::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
#applepay-erreur { margin-top: .5rem; font-size: .875rem; color: #d50000; }
#applepay-erreur:empty, #applepay-erreur[hidden] { display: none; }

/* Onglets Carte bancaire / PayPal */
.pay-tabs { display: flex; gap: 8px; padding: 5px 0; margin: 0 0 1rem; list-style: none; }
.pay-tabs > li { flex: 1; }
.custom-pay-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px;
  border: 1.5px solid transparent;
  border-radius: 9px;
  background: transparent;
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--pay-text-muted);
  cursor: pointer;
  user-select: none;
  transition: background var(--pay-transition), color var(--pay-transition), border-color var(--pay-transition), box-shadow var(--pay-transition);
}
.custom-pay-btn:hover:not(.active) { background: rgba(255, 255, 255, .7); color: #0f172a; border-color: var(--pay-border); }
.custom-pay-btn.active {
  background: #fff; color: var(--pay-accent); border-color: #c5d7ee;
  box-shadow: 0 1px 4px rgba(var(--pay-accent-rgb), .15), 0 2px 8px rgba(var(--pay-accent-rgb), .10);
}
.custom-pay-btn:focus-visible { outline: 3px solid var(--pi-focus); outline-offset: 1px; }
/* Onglet inactif : contour léger pour qu'il se lise comme un bouton (sur cartegrise.net il est sans contour). */
.custom-pay-btn:not(.active) { background: #fff; border: 1px solid var(--pay-border); }
.custom-pay-btn:hover:not(.active) { background: #fff; border-color: #b8c8dc; color: #0f172a; }

[role="tabpanel"][hidden], #hipay-hostedfields-form-btn[hidden], .paiement-traitement[hidden], .paiement-pret[hidden] { display: none; }
#hipay-hostedfields-form, #hipay-hostedfields-form-paypal { width: 100%; margin: 0; }
#hipay-hostedfields-form.is-chargement { visibility: hidden; height: 0; overflow: hidden; }

/* Champs carte (iframes HiPay) */
.hipay-hostedfields-row { display: flex; gap: 12px; margin: 0 0 12px; }
.hipay-hostedfields-row--fin { margin-bottom: 10px; }
.hipay-hostedfields-field-wrap { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-width: 0; }
.hipay-hostedfields-field-container-half { width: calc(50% - 6px); }
.hipay-static-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #475569; user-select: none; }
.hipay-hostedfields-field-container {
  position: relative;
  display: flex; align-items: center;
  width: 100%; height: 45px;
  background: var(--pay-bg);
  border: 1px solid var(--pay-border);
  border-radius: var(--pay-radius);
  box-shadow: var(--pay-shadow-sm);
  clip-path: inset(0 round 10px);
  cursor: text;
  transition: border-color var(--pay-transition), background-color var(--pay-transition);
}
.hipay-hostedfields-field-container:hover { border-color: #b8c8dc; }
.hipay-hostedfields-field {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  width: calc(100% + 28px) !important;
  margin: 0 !important;
  opacity: .001;
  transition: opacity .15s ease;
  background: transparent;
  z-index: 2;
}
.hipay-hostedfields-field.HiPayField--focused,
.hipay-hostedfields-field:not(.HiPayField--empty) { opacity: 1; }
.hipay-hostedfields-field iframe { border: 0 !important; outline: none !important; box-shadow: none !important; }

.hipay-hostedfields-field-container:has(.HiPayField--focused) {
  border: 1.5px solid var(--pay-accent);
  outline: 3px solid rgba(var(--pay-accent-rgb), .18);
  outline-offset: 0;
}
.hipay-hostedfields-field-container:has(.HiPayField--valid):not(:has(.HiPayField--focused)) {
  border-color: var(--pay-border-valid);
  background: var(--pay-valid-bg);
}
.hipay-hostedfields-field-container:has(.HiPayField--invalid) {
  border-color: var(--pay-error);
  outline: 3px solid rgba(229, 62, 62, .12);
  outline-offset: 0;
}
/* Nom prérempli : neutre tant que tout le formulaire n'est pas valide. */
.hipay-hostedfields-field-container:has(#hipay-hostedfields-card-holder.HiPayField--valid):not(:has(.HiPayField--focused)):not(.user-validated) {
  border-color: var(--pay-border);
  background: var(--pay-bg);
  outline: none;
}
.hipay-hostedfields-field-container.user-validated:has(#hipay-hostedfields-card-holder.HiPayField--valid) {
  border-color: var(--pay-border-valid);
  background: var(--pay-valid-bg);
}
/* Champ signalé manquant au clic sur « Payer » */
.hipay-hostedfields-field-container.is-invalid {
  border-color: var(--pay-error);
  outline: 3px solid rgba(229, 62, 62, .12);
  outline-offset: 0;
  background: #fff5f5;
}

#hipay-hostedfields-help-cvc {
  display: none;
  margin: 6px 0 10px; padding: 10px 14px;
  border: 1px solid #fde68a; border-radius: 8px;
  background: #fffbeb; color: #92400e;
  font-size: 13px; font-weight: 500; line-height: 1.5;
}
#hipay-hostedfields-help-cvc.visible, #hipay-hostedfields-help-cvc:not(:empty) { display: block; }

#hipay-hostedfields-error-message {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0; padding: 0;
  color: var(--pay-error); font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center;
}
#hipay-hostedfields-error-message:not(:empty) {
  margin-top: 10px; padding: 10px 14px;
  background: #fff5f5; border: 1px solid #fecaca; border-radius: 8px;
}

/* Bouton Payer (carte et PayPal) */
#hipay-hostedfields-submit-button,
#hipay-hostedfields-submit-button-paypal {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 52px; margin-top: .5rem;
  overflow: hidden; white-space: nowrap;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(135deg, var(--pay-accent) 0%, #2f74d4 100%);
  border: 0; border-radius: var(--pay-radius);
  box-shadow: 0 2px 6px rgba(var(--pay-accent-rgb), .35), 0 1px 2px rgba(var(--pay-accent-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: pointer;
  user-select: none;
  transition: background var(--pay-transition), box-shadow var(--pay-transition), transform var(--pay-transition), opacity var(--pay-transition);
}
#hipay-hostedfields-submit-button::before,
#hipay-hostedfields-submit-button-paypal::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, transparent 100%);
}
#hipay-hostedfields-submit-button:hover:not(:disabled),
#hipay-hostedfields-submit-button-paypal:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--pay-accent-dark) 0%, var(--pay-accent) 100%);
  box-shadow: 0 4px 12px rgba(var(--pay-accent-rgb), .45), 0 2px 4px rgba(var(--pay-accent-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .15);
  transform: translateY(-1px);
}
#hipay-hostedfields-submit-button:active:not(:disabled),
#hipay-hostedfields-submit-button-paypal:active:not(:disabled) { transform: translateY(0); }
#hipay-hostedfields-submit-button:focus-visible,
#hipay-hostedfields-submit-button-paypal:focus-visible { outline: 3px solid var(--pi-focus); outline-offset: 2px; }
#hipay-hostedfields-submit-button:disabled { background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%); box-shadow: none; cursor: not-allowed; opacity: .7; }
#hipay-hostedfields-submit-button .bi,
#hipay-hostedfields-submit-button-paypal .bi { font-size: 15px; opacity: .85; margin-right: 2px; }
.pay-btn-amount { margin-left: 2px; letter-spacing: -.01em; }
@media (max-width: 369px) { .pay-btn-amount { display: none; } }

@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--pay-accent-rgb), .5); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--pay-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--pay-accent-rgb), 0); }
}
#hipay-hostedfields-submit-button.btn-pulse { animation: btn-pulse 1.2s ease infinite; }

.paiement-note { margin: .85rem 0 0; text-align: center; font-size: 13px; line-height: 1.35; color: var(--pay-text-muted); }
.paiement-note .bi { margin-right: .25rem; }
.paiement-paypal-info {
  margin: 0 0 1rem; padding: 11px 14px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 14px; line-height: 1.6; color: var(--pay-text-muted);
}

/* Chargement du module, traitement en cours */
.paiement-pret, .paiement-traitement { text-align: center; padding: 1.5rem 1rem; }
.paiement-pret .spinner-border, .paiement-traitement .spinner-border { color: var(--pay-accent); width: 2.2rem; height: 2.2rem; border-width: 2.5px; }
.hipay-loading-title { margin-top: 1rem; font-size: 14.5px; font-weight: 600; color: #0f172a; }
.hipay-loading-sub { margin-top: .25rem; font-size: 13px; color: var(--pay-text-label); }

.paiement-bloque, .paiement-refus { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 12px; background: #fffbeb; border: 1px solid #fbbf24; color: #92400e; }
.paiement-bloque > .bi, .paiement-refus > .bi { font-size: 1.35rem; color: #d97706; line-height: 1.2; }
.paiement-bloque strong, .paiement-refus strong { display: block; color: #78350f; margin-bottom: .2rem; }
.paiement-bloque p, .paiement-refus p { margin: 0 0 .75rem; font-size: .95rem; }
.paiement-refus { margin-bottom: 1.25rem; }
.paiement-refus p { margin: 0; }

/* Pied : « sécurisé par HiPay » + cartes acceptées */
.pay-trust-footer {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid #edf1f6;
  user-select: none;
}
.hipay-secured { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--pay-text-label); }
.pay-trust-badges { display: flex; align-items: center; gap: 8px; }
.pay-trust-badges[hidden] { display: none; }
.pay-trust-badges img {
  display: block; width: auto; height: 26px;
  padding: 2px 4px;
  background: #f8fafc; border: 1px solid #e5eef5; border-radius: 6px;
}
@media (max-width: 369px) { .hide-below-370 { display: none !important; } }

@media (max-width: 319px) {
  .hipay-hostedfields-row { flex-wrap: wrap; }
  .hipay-hostedfields-field-container-half { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #hipay-hostedfields-submit-button.btn-pulse { animation: none; box-shadow: 0 0 0 3px rgba(var(--pay-accent-rgb), .35); }
  .hipay-hostedfields-field, .hipay-hostedfields-field-container, .custom-pay-btn { transition: none; }
}

/* Barre fixe mobile (total + bouton), comme sur cartegrise.net : elle s'efface
   dès que le bouton du récapitulatif arrive à l'écran (assets/v2/js/app.js),
   et ne tombe donc jamais sur le pied de page.
   Pas de env(safe-area-inset-bottom) : la page n'est pas en viewport-fit=cover,
   et sur Android cette valeur prenait la hauteur de la barre de navigation tant
   que la barre d'adresse était affichée (vide blanc sous le bouton). */
.config-barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .6rem 1rem;
  background: var(--pi-white);
  border-top: 1px solid var(--pi-line);
  box-shadow: 0 -4px 14px -8px rgba(16, 24, 40, .18);
  transition: transform .22s ease, opacity .22s ease;
}
.config-barre.is-masquee { transform: translateY(110%); opacity: 0; pointer-events: none; }
.config-barre span { display: block; font-size: .75rem; color: var(--pi-ink-soft); }
.config-barre strong { font-size: 1.2rem; font-weight: 600; color: var(--pi-ink); letter-spacing: -.01em; }
.config-barre .btn-cta { height: 2.9rem; min-width: 0; padding-inline: 1.4rem; font-size: 1.025rem; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .config-barre { transition: none; } }

/* Validation : on ne signale que les erreurs, pas les champs corrects */
.was-validated .form-control:valid,
.was-validated .form-select:valid { border-color: var(--bs-border-color); background-image: none; padding-right: .75rem; }
.was-validated .form-select:valid { background-image: var(--bs-form-select-bg-img); padding-right: 2.25rem; }
.was-validated .form-check-input:valid ~ .form-check-label { color: inherit; }
.was-validated .form-check-input:valid:checked { background-color: var(--pi-blue); border-color: var(--pi-blue); }

/* « Vos plaques » (plaque.php) */
.panier-resume-total { display: flex; justify-content: space-between; align-items: baseline; padding: .7rem 0 1rem; border-top: 1px solid var(--pi-line); }
.panier-resume-total span { font-weight: 600; }
.panier-resume-total strong { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }

/* ── Pied de page ──────────────────────────────────────────────────── */
.site-footer { background: var(--pi-ink); color: rgba(255, 255, 255, .7); font-size: .9rem; }
.footer-haut { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; padding-block: 2.25rem 1.75rem; }
.footer-marque { grid-column: 1 / -1; }
@media (min-width: 992px) {
  .footer-haut { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-block: 2.75rem 2.25rem; }
  .footer-marque { grid-column: auto; }
}
/* Le logo a un fond blanc : on le pose sur une pastille plutôt que de l'inverser */
.footer-logo-wrap { display: inline-block; }
.footer-logo { display: block; height: 28px; width: auto; } /* version claire du logo, fond transparent */
.footer-lead { max-width: 21rem; margin: .85rem 0 1rem; line-height: 1.55; }
.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; opacity: .85; }
.footer-title { font-family: var(--pi-font); font-weight: 600; font-size: .9rem; color: var(--pi-white); margin-bottom: .6rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.footer-links a, .footer-legal a { color: rgba(255, 255, 255, .7); text-decoration: none; cursor: pointer; }
.footer-links a:hover, .footer-links a:focus-visible, .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--pi-white); text-decoration: underline; }
.footer-tel { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--pi-font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: .01em; color: var(--pi-white); text-decoration: none; }
.footer-tel .bi { font-size: 1rem; color: #8ab8f5; }
.footer-tel:hover { color: var(--pi-white); text-decoration: underline; }
.footer-tel-note { margin: .1rem 0 .7rem; font-size: .75rem; color: rgba(255, 255, 255, .5); }
.footer-hours { margin: 0; font-size: .85rem; line-height: 1.5; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; color: rgba(255, 255, 255, .5); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; padding-block: .9rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.footer-legal a { color: rgba(255, 255, 255, .6); }

/* Pied de page minimal du tunnel (comme cartegrise.net) */
.site-footer--mini { font-size: .875rem; }
.footer-mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: 1.1rem;
}
.footer-mini-liens { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.footer-mini-liens a { color: rgba(255, 255, 255, .8); text-decoration: none; cursor: pointer; }
.footer-mini-liens a:hover, .footer-mini-liens a:focus-visible { color: var(--pi-white); text-decoration: underline; }
.footer-mini-copy { color: rgba(255, 255, 255, .55); }
.footer-mini-copy strong { color: rgba(255, 255, 255, .85); font-weight: 600; }

/* Liens masqués aux robots : curseur cohérent avant activation */
a[data-href] { cursor: pointer; }

/* Étape 1 : déroulé de la commande */
.resume-etapes { list-style: none; counter-reset: re; margin: 0; padding: 0; display: grid; gap: .8rem; }
.resume-etapes li { counter-increment: re; position: relative; padding-left: 2.1rem; font-size: .9rem; line-height: 1.4; }
.resume-etapes li::before {
  content: counter(re);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--pi-line-strong);
  font-size: .75rem;
  font-weight: 600;
  color: var(--pi-ink-soft);
}
.resume-etapes li:first-child::before { border-color: var(--pi-blue); color: var(--pi-blue); }
.resume-etapes strong { display: block; font-weight: 600; }
.resume-etapes span { color: var(--pi-ink-soft); }
.tunnel-card .plaque-row .btn-cta { font-size: 1.15rem; }

/* Tunnel : le pied de page reste en bas même sur une page courte */
/* Pied de page collé en bas d'écran sur ordinateur seulement. Sur mobile, 100vh compte la barre
   d'adresse masquée : une page courte (/plaque/ avec une seule plaque) laissait un grand vide
   avant le pied de page. Là, le pied de page suit simplement le contenu, comme sur /options/. */
@media (min-width: 992px) {
  body.is-tunnel { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body.is-tunnel > .tunnel-main { flex: 1 0 auto; }
}
/* Plaques moto (plus hautes que larges) : un peu plus de hauteur sur la scène */
.choix-plaques[data-famille="2"] .choix-plaque-img { max-height: 4.75rem; }
/* Paiement : titre directement suivi du bloc */
.paiement-titre + .paiement-refus, .paiement-titre + .paiement { margin-top: .9rem; }

/* ══ Pages de contenu (texte, aide, avis, modèles, compte) ════════════ */
.page-entete { background: var(--pi-white); border-bottom: 1px solid var(--pi-line); padding-block: clamp(1.1rem, 2.6vw, 2rem); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .55rem; padding: 0; list-style: none; font-size: .825rem; color: var(--pi-ink-soft); }
.fil-ariane li + li::before { content: "\203A"; margin-right: .3rem; color: #9aa5b4; }
.fil-ariane a { color: var(--pi-ink-soft); text-decoration: none; }
.fil-ariane a:hover { color: var(--pi-blue); text-decoration: underline; }
.page-titre { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin: 0; letter-spacing: .005em; }
.page-lead { max-width: 44rem; margin: .4rem 0 0; color: var(--pi-ink-soft); font-size: .95rem; line-height: 1.45; }
.page-corps { background: var(--pi-surface); padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3.5rem); }
.page-carte { background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); box-shadow: var(--pi-shadow-card); padding: clamp(1.1rem, 3vw, 2rem); }

/* Texte long */
.prose { color: #364152; line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-family: var(--pi-font); font-weight: 600; font-size: 1.15rem; color: var(--pi-ink); margin: 2rem 0 .6rem; scroll-margin-top: 1.25rem; letter-spacing: -.005em; }
.prose h3 { font-family: var(--pi-font); font-weight: 600; font-size: 1.025rem; color: var(--pi-ink); margin: 1.5rem 0 .45rem; scroll-margin-top: 1.25rem; }
.prose p, .prose li { font-size: .975rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin-bottom: 1rem; }
.prose li + li { margin-top: .2rem; }
.prose a { overflow-wrap: anywhere; }
.prose-maj { font-size: .85rem; color: var(--pi-ink-soft); }

/* Sommaire collant */
.sommaire { background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); padding: .85rem 1rem; }
@media (min-width: 992px) { .sommaire { position: sticky; top: var(--pi-sticky-top); max-height: calc(100vh - var(--pi-sticky-top) - 1.25rem); overflow-y: auto; } }
.sommaire summary { font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sommaire summary::-webkit-details-marker { display: none; }
.sommaire summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .8rem; color: var(--pi-ink-soft); transition: transform .15s ease; }
.sommaire[open] summary::after { transform: rotate(180deg); }
.sommaire ol { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .1rem; }
.sommaire a { display: block; padding: .3rem .5rem; border-radius: 6px; font-size: .85rem; line-height: 1.35; color: var(--pi-ink-soft); text-decoration: none; }
.sommaire a:hover { background: var(--pi-surface); color: var(--pi-blue); }
.sommaire .sommaire-h3 a { padding-left: 1.1rem; font-size: .8rem; }

/* Aide (FAQ) */
.faq-themes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.faq-theme { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border: 1px solid var(--pi-line); border-radius: 999px; background: var(--pi-white); color: var(--pi-ink); font-size: .9rem; font-weight: 500; text-decoration: none; }
.faq-theme .bi { color: var(--pi-blue); }
.faq-theme:hover { border-color: var(--pi-blue); color: var(--pi-blue); }
.faq-groupe + .faq-groupe { margin-top: 1.75rem; }
.faq-groupe { scroll-margin-top: 1.25rem; }
.faq-groupe-titre { font-family: var(--pi-font); font-weight: 600; font-size: 1.1rem; margin-bottom: .75rem; }
.faq-groupe .faq-accordion { --bs-accordion-btn-padding-y: .95rem; box-shadow: var(--pi-shadow-card); border-radius: var(--pi-radius); }
.faq-groupe .faq-accordion .accordion-button { font-size: .975rem; font-weight: 500; }
.aide-texte { font-size: .925rem; color: var(--pi-ink-soft); }
.aide-numero { max-height: 3rem; }
.resume-points a { color: var(--pi-blue); }

/* Avis */
.avis-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: .85rem 0 0; }
.avis-badges span { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; background: #eef3fb; color: var(--pi-blue); font-size: .825rem; font-weight: 500; }
.avis-synthese { background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); box-shadow: var(--pi-shadow-card); padding: 1.35rem; text-align: center; }
@media (min-width: 992px) { .avis-synthese { position: sticky; top: var(--pi-sticky-top); } }
.avis-note { margin: 0; line-height: 1; }
.avis-note strong { font-family: var(--pi-font-display); font-weight: 600; font-size: 2.75rem; letter-spacing: -.01em; }
.avis-note span { font-size: 1.15rem; color: var(--pi-ink-soft); margin-left: .15rem; }
.etoiles { display: inline-flex; gap: .15rem; color: #e8a317; }
.avis-synthese > .etoiles { font-size: 1.3rem; margin: .5rem 0 .25rem; }
.avis-total { margin: 0 0 1rem; font-size: .925rem; color: var(--pi-ink-soft); }
.avis-total strong { color: var(--pi-ink); font-weight: 600; }
.avis-total--cumul { margin-top: -.8rem; font-size: .875rem; }
.avis-repartition { list-style: none; margin: 0 0 1rem; padding: 1rem 0 0; border-top: 1px solid var(--pi-line); display: grid; gap: .4rem; }
.avis-repartition li { display: grid; grid-template-columns: 2.5rem 1fr 2.75rem; align-items: center; gap: .6rem; font-size: .825rem; }
.avis-repartition-label { color: var(--pi-ink-soft); text-align: left; white-space: nowrap; }
.avis-repartition-label .bi { color: #e8a317; font-size: .75rem; }
.avis-barre { height: .45rem; border-radius: 999px; background: var(--pi-surface); overflow: hidden; }
.avis-barre span { display: block; height: 100%; border-radius: inherit; background: #e8a317; }
.avis-repartition-nb { text-align: right; color: var(--pi-ink-soft); }
.avis-source { margin: .75rem 0 0; font-size: .775rem; line-height: 1.5; color: #6a7686; text-align: left; }
.avis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.avis-carte { background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); box-shadow: var(--pi-shadow-card); padding: 1.1rem 1.25rem; }
.avis-carte-tete { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; margin-bottom: .65rem; }
.avis-avatar { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: #eef3fb; color: var(--pi-blue); font-weight: 600; }
.avis-auteur { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.avis-date { margin: 0; font-size: .8rem; color: var(--pi-ink-soft); }
.avis-carte .etoiles { font-size: .85rem; }
.avis-texte { margin: 0; font-size: .95rem; line-height: 1.6; color: #364152; overflow-wrap: anywhere; }
.avis-reponse { margin-top: .85rem; padding: .75rem 1rem; border-left: 3px solid var(--pi-blue); background: var(--pi-surface); border-radius: 0 8px 8px 0; font-size: .9rem; line-height: 1.55; color: #364152; overflow-wrap: anywhere; }
.avis-reponse-tete { margin: 0 0 .25rem; font-weight: 600; font-size: .85rem; color: var(--pi-ink); display: flex; align-items: center; gap: .4rem; }
.avis-attestation { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; font-size: .8rem; text-align: left; color: #6a7686; }
@media (max-width: 575.98px) {
  .avis-carte-tete { grid-template-columns: auto 1fr; }
  .avis-carte-tete .etoiles { grid-column: 2; }
}
.pagination-pi { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 1.5rem; }
.pagination-pi-lien { min-width: 2.25rem; height: 2.25rem; display: inline-grid; place-items: center; padding: 0 .5rem; border: 1px solid var(--pi-line); border-radius: 8px; background: var(--pi-white); color: var(--pi-ink); font-size: .9rem; text-decoration: none; }
.pagination-pi-lien:hover { border-color: var(--pi-blue); color: var(--pi-blue); }
.pagination-pi-lien.is-actif { background: var(--pi-blue); border-color: var(--pi-blue); color: var(--pi-white); font-weight: 600; }
.pagination-pi-ellipse { align-self: center; color: var(--pi-ink-soft); padding: 0 .2rem; }

/* Nos modèles */
.modeles-comparatif { background: var(--pi-surface); }
.materiau { display: flex; flex-direction: column; height: 100%; background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); box-shadow: var(--pi-shadow-card); padding: 1.25rem; }
.materiau .mini-plaque { height: 44px; font-size: 1.15rem; border-width: 1px; border-left-width: 12px; border-right-width: 12px; }
.materiau .mini-plaque--collection { border-width: 1px; }
.materiau .mini-plaque--plexi, .materiau .mini-plaque--design, .materiau .mini-plaque--moto { border-top-width: 0; border-bottom-width: 0; }
.materiau .mini-plaque--moto { border-right-width: 0; }
.materiau-nom { font-family: var(--pi-font); font-weight: 600; font-size: 1.15rem; margin: 1rem 0 .35rem; }
.materiau-texte { font-size: .9rem; color: var(--pi-ink-soft); }
.materiau-points { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; font-size: .875rem; flex: 1 1 auto; align-content: start; }
.materiau-points .bi { color: var(--pi-blue); margin-right: .4rem; }
.materiau-pied { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .85rem; border-top: 1px solid var(--pi-line); }
.materiau-prix { font-size: .85rem; color: var(--pi-ink-soft); }
.materiau-prix strong { font-size: 1.1rem; color: var(--pi-ink); font-weight: 600; }
.modeles-regles .prose h3:first-child { margin-top: 0; }
.section-cta { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cta-bande { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--pi-radius); background: var(--pi-ink); color: var(--pi-white); }
.cta-titre { font-size: 1.6rem; margin: 0 0 .25rem; }
.cta-texte { margin: 0; color: rgba(255, 255, 255, .75); }
.cta-bande .btn-cta { height: 3.25rem; font-size: 1.05rem; box-shadow: none; }

/* Nos valeurs */
.valeurs-intro { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; gap: 1.5rem 2rem; align-items: center; }
.valeurs-logo { width: 100%; height: auto; border-radius: 8px; }
.valeurs-citation { margin: 0; }
.valeurs-citation p { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; color: var(--pi-ink); margin-bottom: .5rem; }
.valeurs-citation footer { font-size: .875rem; color: var(--pi-ink-soft); }
.valeurs-carte { height: 100%; }
.valeurs-carte p { font-size: .95rem; color: #364152; line-height: 1.65; }
@media (max-width: 575.98px) { .valeurs-intro { grid-template-columns: 1fr; } .valeurs-logo { max-width: 12rem; } }

/* 404 */
.erreur { display: flex; align-items: center; }
.erreur-carte { max-width: 40rem; margin: 0 auto; text-align: center; }
.erreur-plaque { display: inline-flex; width: auto; padding-inline: 1.25rem; margin-bottom: 1.25rem; height: 56px; font-size: 1.6rem; }
.erreur-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.erreur-actions .btn-cta { height: 3rem; font-size: 1.025rem; box-shadow: none; }
.btn-ligne--grand { height: 3rem; padding: 0 1.25rem; font-size: .95rem; color: var(--pi-ink); }
.erreur-liens { display: flex; justify-content: center; gap: 1.25rem; margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--pi-line); list-style: none; font-size: .9rem; }
body:has(main.erreur) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(main.erreur) main.erreur { flex: 1 0 auto; }

/* Compte : connexion, mot de passe */
.auth { display: flex; align-items: flex-start; }
body:has(main.auth) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(main.auth) main.auth { flex: 1 0 auto; }
.auth-carte { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); max-width: 56rem; margin: clamp(0rem, 3vw, 1.5rem) auto 0; background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(16, 24, 40, .25); overflow: hidden; }
.auth-carte--seule { grid-template-columns: 1fr; max-width: 28rem; }
.auth-form { padding: clamp(1.35rem, 4vw, 2.5rem); }
.auth-titre { font-family: var(--pi-font); font-weight: 600; font-size: 1.6rem; letter-spacing: -.015em; margin: 0 0 .3rem; }
.auth-lead { color: var(--pi-ink-soft); font-size: .9rem; margin-bottom: 1.25rem; }
.auth-form .form-label { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }
.auth-form .form-control { height: 2.9rem; border-color: var(--pi-line-strong); }
.auth-lien-petit { font-size: .825rem; }
.auth-mdp { position: relative; }
.auth-mdp .form-control { padding-right: 2.75rem; }
.auth-voir { position: absolute; top: 0; right: 0; width: 2.75rem; height: 2.9rem; border: 0; background: none; color: var(--pi-ink-soft); }
.auth-voir:hover { color: var(--pi-blue); }
.was-validated .auth-mdp .form-control:invalid ~ .auth-voir { right: 1.5rem; }
.auth-mdp + .invalid-feedback { display: none; }
.was-validated .auth-mdp:has(:invalid) + .invalid-feedback { display: block; }
.auth-bouton { height: 3rem; font-size: 1.025rem; min-width: 0; box-shadow: none; margin-top: .25rem; }
.auth-retour { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1rem; font-size: .875rem; text-decoration: none; }
.auth-confirmation { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem; margin: 1rem 0 1.25rem; border-radius: 10px; background: #eef7f1; color: #1a6b41; }
.auth-confirmation > .bi { font-size: 1.4rem; line-height: 1.2; }
.auth-confirmation p { margin: 0; font-size: .925rem; color: #24543a; }
.auth-confirmation--alerte { background: #fff8e6; }
.auth-confirmation--alerte > .bi { color: #b07800; }
.auth-confirmation--alerte p { color: #5c4300; }
.auth-cote { padding: clamp(1.35rem, 4vw, 2.5rem); background: linear-gradient(160deg, #1559b7 0%, #0f4590 100%); color: rgba(255, 255, 255, .85); font-size: .95rem; }
.auth-cote-titre { font-family: var(--pi-font); font-weight: 600; font-size: 1.15rem; color: var(--pi-white); margin-bottom: .6rem; }
.auth-cote ul { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.auth-cote li { display: flex; gap: .6rem; align-items: baseline; }
.auth-cote li .bi { color: var(--pi-white); }
.auth-cote-bouton { display: inline-flex; align-items: center; background: var(--pi-white); color: var(--pi-blue); font-weight: 600; border-radius: 8px; padding: .6rem 1.1rem; }
.auth-cote-bouton:hover { background: #eef3fb; color: var(--pi-blue-dark); }
@media (max-width: 767.98px) { .auth-carte { grid-template-columns: 1fr; } }
.faq-accordion .accordion-button:focus:not(:focus-visible) { box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 var(--pi-line); }

/* ══ Espace client ═══════════════════════════════════════════════════ */
.compte-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.compte-nav-lien { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--pi-line); background: var(--pi-white); color: var(--pi-ink-soft); font-size: .9rem; font-weight: 500; text-decoration: none; }
.compte-nav-lien:hover { color: var(--pi-blue); border-color: #9fb6d9; }
.compte-nav-lien.is-actif { background: var(--pi-blue); border-color: var(--pi-blue); color: var(--pi-white); }
.compte-nav-sortie { margin-left: auto; }
@media (max-width: 575.98px) { .compte-nav-sortie { margin-left: 0; } }

.statut { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.statut::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.statut--attente { background: #fff6e0; color: #8a5a00; }
.statut--cours { background: #eaf1fc; color: var(--pi-blue); }
.statut--ok { background: #e8f5ee; color: #1a6b41; }
.statut--neutre { background: var(--pi-surface); color: var(--pi-ink-soft); }

.commandes-onglets { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--pi-line); margin-bottom: 1rem; }
.commandes-onglet { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--pi-ink-soft); font-weight: 500; text-decoration: none; }
.commandes-onglet span { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--pi-white); border: 1px solid var(--pi-line); font-size: .75rem; text-align: center; }
.commandes-onglet.is-actif { color: var(--pi-ink); border-bottom-color: var(--pi-blue); }
.commandes-onglet:hover { color: var(--pi-blue); }

.commandes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.commande-lien { position: relative; display: grid; gap: .6rem; padding: 1.1rem 1.25rem 1.3rem; background: var(--pi-white); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); box-shadow: var(--pi-shadow-card); color: var(--pi-ink); text-decoration: none; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.commande-lien:hover { border-color: #9fb6d9; box-shadow: 0 6px 18px -12px rgba(16, 24, 40, .3); color: var(--pi-ink); }
.commande-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.commande-code { font-weight: 600; font-size: 1.05rem; }
.commande-infos { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-size: .875rem; color: var(--pi-ink-soft); }
.commande-infos .bi { margin-right: .35rem; color: #8a95a5; }
.commande-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .6rem; border-top: 1px solid var(--pi-line); }
.commande-total { font-weight: 600; }
.commande-messages { display: inline-flex; align-items: center; gap: .35rem; font-size: .825rem; font-weight: 500; color: var(--pi-blue); }
.commande-voir { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .875rem; font-weight: 500; color: var(--pi-blue); }
.commande-progression { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pi-surface); }
.commande-progression span { display: block; height: 100%; background: var(--pi-blue); }

.vide { text-align: center; padding: 2.5rem 1.5rem; }
.vide > .bi { font-size: 2rem; color: #9aa5b4; }
.vide p { max-width: 30rem; margin: .75rem auto 1.25rem; color: var(--pi-ink-soft); }
.vide strong { color: var(--pi-ink); }

/* Détail de commande */
.commande-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.pastille-nb { min-width: 1.15rem; height: 1.15rem; display: inline-grid; place-items: center; padding: 0 .3rem; border-radius: 999px; background: #d92d20; color: var(--pi-white); font-size: .7rem; font-weight: 600; }
.frise { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: .25rem 0 0; padding: 0; counter-reset: none; }
.frise-etape { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 .4rem; }
.frise-etape:not(:last-child)::after { content: ""; position: absolute; top: .9rem; left: calc(50% + 1.1rem); right: calc(-50% + 1.1rem); height: 2px; background: var(--pi-line); }
.frise-etape.is-faite:not(:last-child)::after { background: var(--pi-blue); }
.frise-point { position: relative; z-index: 1; width: 1.85rem; height: 1.85rem; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--pi-line-strong); background: var(--pi-white); color: var(--pi-ink-soft); font-size: .8rem; font-weight: 600; }
.frise-etape.is-faite .frise-point { background: var(--pi-blue); border-color: var(--pi-blue); color: var(--pi-white); }
.frise-etape.is-courante .frise-point { box-shadow: 0 0 0 4px #dce8f8; }
.frise-titre { margin-top: .5rem; font-weight: 600; font-size: .875rem; line-height: 1.3; }
.frise-etape:not(.is-faite) .frise-titre { color: var(--pi-ink-soft); font-weight: 500; }
.frise-detail { font-size: .775rem; color: var(--pi-ink-soft); }
.commande-statut-texte { display: flex; gap: .5rem; align-items: baseline; margin: 1.25rem 0 0; padding: .7rem .9rem; border-radius: 8px; background: var(--pi-surface); font-size: .9rem; color: #364152; }
.commande-statut-texte .bi { color: var(--pi-blue); }
.suivi-colis { margin-top: 1.25rem; }
.suivi-numero { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--pi-line); border-radius: 10px; color: var(--pi-ink); text-decoration: none; }
.suivi-numero + .suivi-numero { margin-top: .4rem; }
.suivi-numero:hover { border-color: var(--pi-blue); color: var(--pi-ink); }
.suivi-numero strong { display: block; font-weight: 600; letter-spacing: .02em; }
.suivi-numero small { font-size: .8rem; color: var(--pi-ink-soft); }
.suivi-lien { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 500; color: var(--pi-blue); white-space: nowrap; }
.remboursement { margin: 1.25rem 0 0; font-size: .9rem; }
.remboursement > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--pi-line); }
.remboursement dt { font-weight: 400; color: var(--pi-ink-soft); }
.remboursement dd { margin: 0; text-align: right; font-weight: 500; }
.commande-options { margin-top: .75rem; padding-top: .25rem; border-top: 1px solid var(--pi-line); }
.commande-totaux { margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--pi-line); }
.aide-commande { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--pi-line); }
.aide-commande p { font-size: .875rem; color: var(--pi-ink-soft); }
.aide-commande strong { color: var(--pi-ink); }
.aide-commande .btn-cta { height: 2.9rem; font-size: 1rem; min-width: 0; box-shadow: none; }
@media (max-width: 575.98px) {
  .frise-titre { font-size: .8rem; }
  .frise-detail { font-size: .72rem; }
  .suivi-numero { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

/* Messagerie */
.messagerie { max-width: 48rem; margin: 0 auto; }
.messagerie-fil { padding: 1.25rem; }
.messagerie-vide { text-align: center; padding: 1.5rem .5rem; color: var(--pi-ink-soft); }
.messagerie-vide > .bi { font-size: 1.75rem; color: #9aa5b4; }
.messagerie-vide p { max-width: 28rem; margin: .5rem auto 0; font-size: .925rem; }
.bulles { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.bulle { max-width: min(36rem, 88%); padding: .75rem .95rem; border-radius: 14px; }
.bulle--service { justify-self: start; background: var(--pi-surface); border-bottom-left-radius: 4px; }
.bulle--client { justify-self: end; background: #eaf1fc; border-bottom-right-radius: 4px; }
.bulle-auteur { margin: 0 0 .25rem; font-size: .75rem; font-weight: 500; color: var(--pi-ink-soft); }
.bulle--service .bulle-auteur { color: var(--pi-blue); }
.bulle-texte { font-size: .95rem; line-height: 1.55; color: var(--pi-ink); overflow-wrap: anywhere; }
.bulle-fichier { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; padding: .3rem .6rem; border-radius: 7px; background: var(--pi-white); border: 1px solid var(--pi-line); font-size: .825rem; text-decoration: none; }
.messagerie-form { margin-top: .75rem; }
.messagerie-form textarea { resize: vertical; min-height: 7rem; border-color: var(--pi-line-strong); }
.messagerie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .75rem; }
.messagerie-fichier { cursor: pointer; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.messagerie-fichier span { overflow: hidden; text-overflow: ellipsis; }
.messagerie-fichier:focus-within { outline: 3px solid var(--pi-focus); outline-offset: 1px; }
.messagerie-aide { font-size: .8rem; color: var(--pi-ink-soft); }
.messagerie-envoyer { margin-left: auto; height: 2.75rem; min-width: 0; padding-inline: 1.4rem; font-size: 1rem; box-shadow: none; }
@media (max-width: 575.98px) { .messagerie-envoyer { width: 100%; } }

/* Mon compte */
.compte-form .form-label { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }
.compte-form .form-control { border-color: var(--pi-line-strong); }
.compte-bouton { height: 2.9rem; min-width: 0; padding-inline: 1.75rem; font-size: 1rem; margin-top: 1.25rem; box-shadow: none; }

/* ── Validation de commande (validation.php) ─────────────────────────── */
.validation { max-width: 38rem; }
.validation-tete { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.validation-tete .tunnel-title { margin-bottom: .25rem; }
.validation-icone {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  font-size: 1.35rem; color: #fff; background: #1f8a4c;
}
.validation--attente .validation-icone,
.validation--verification .validation-icone { background: var(--pi-surface); color: var(--pi-ink-soft); }
.validation--echec .validation-icone { background: #fdecec; color: #b42318; }
.validation-lead { margin: 0; color: var(--pi-ink-soft); }
.validation-lead strong { font-weight: 600; color: var(--pi-ink); }

.validation-recap { margin: 0 0 1.25rem; border: 1px solid var(--pi-line); border-radius: 10px; }
.validation-recap > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; }
.validation-recap > div + div { border-top: 1px solid var(--pi-line); }
.validation-recap dt { font-weight: 400; color: var(--pi-ink-soft); }
.validation-recap dd { margin: 0; font-weight: 500; text-align: right; }

.validation-suite { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .65rem; }
.validation-suite li { display: flex; gap: .65rem; line-height: 1.45; }
.validation-suite i { color: var(--pi-blue); margin-top: .1rem; }
.validation-suite strong { font-weight: 600; }

.validation-alerte {
  display: flex; gap: .65rem; padding: .75rem .9rem; margin-bottom: 1.25rem;
  background: #fff8e6; border: 1px solid #f3dfa6; border-radius: 10px;
}
.validation-alerte i { color: #8a6100; margin-top: .1rem; }
.validation-alerte p { margin: 0; font-size: .95rem; }
.validation-alerte strong { font-weight: 600; }

.validation-acces { background: var(--pi-surface); border-radius: 10px; padding: .85rem .95rem; margin-bottom: 1.25rem; }
.validation-acces-titre { font-weight: 600; margin: 0 0 .4rem; }
.validation-acces dl { margin: 0; display: grid; gap: .25rem; }
.validation-acces dl > div { display: flex; gap: .5rem; flex-wrap: wrap; }
.validation-acces dt { font-weight: 400; color: var(--pi-ink-soft); min-width: 7rem; }
.validation-acces dd { margin: 0; word-break: break-all; }
.validation-mdp {
  font-size: 1rem; color: var(--pi-ink); background: #fff; border: 1px solid var(--pi-line-strong);
  border-radius: 6px; padding: .1rem .45rem; letter-spacing: .04em;
}
.validation-acces-note { margin: .5rem 0 0; font-size: .875rem; color: var(--pi-ink-soft); }


/* ── Sous-titres : plus discrets sur mobile (une ligne au lieu de deux) ── */
@media (max-width: 575.98px) {
  .tunnel-lead, .page-lead, .auth-lead, .validation-lead { font-size: .85rem; }
  .tunnel-lead { margin-bottom: .85rem; }
}

/* ── Options en cartes, comme les plaques ──────────────────────────────── */
.choix-plaques--options .choix-plaque-scene { min-height: 5.5rem; padding: 1.75rem .9rem .85rem; }
.choix-option-visuel { max-height: 3rem; filter: none; }
.choix-plaques--options .choix-plaque-desc { overflow-wrap: anywhere; }
.carte-accessoire {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--pi-line); border-radius: 12px; overflow: hidden; background: var(--pi-white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.carte-accessoire.is-actif { border-color: var(--pi-blue); box-shadow: 0 0 0 1px var(--pi-blue), 0 6px 18px -10px rgba(21, 89, 183, .45); }
.carte-accessoire.is-actif .choix-plaque-scene { background: linear-gradient(180deg, #eef4fd 0%, #e1ebfa 100%); }
.carte-accessoire .choix-plaque-nom { cursor: pointer; margin: 0; }
.carte-accessoire .qte { margin-top: .6rem; }
/* 3 cartes sur 2 colonnes (mobile) : la dernière prend toute la largeur */
@container (max-width: 39.99rem) {
  .choix-plaques--options > .choix-plaque:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Quantité « − n + » ─────────────────────────────────────────────── */
.qte {
  display: inline-flex; align-items: stretch; width: 100%; max-width: 9.5rem; height: 2.5rem;
  border: 1px solid var(--pi-line-strong); border-radius: 8px; background: var(--pi-white); overflow: hidden;
}
.qte:focus-within { border-color: var(--pi-blue); box-shadow: 0 0 0 .2rem rgba(21, 89, 183, .2); }
.qte-btn {
  flex: 0 0 2.5rem; display: grid; place-items: center; border: 0; background: var(--pi-surface);
  color: var(--pi-ink); font-size: 1rem; cursor: pointer; transition: background-color .15s ease;
}
.qte-btn:hover:not(:disabled) { background: #e2e8f0; }
.qte-btn:disabled { color: #b4bcc8; cursor: default; }
.qte-btn:focus-visible { outline: 2px solid var(--pi-blue); outline-offset: -2px; }
.qte-input {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; text-align: center; font: inherit; font-weight: 600;
  color: var(--pi-ink); background: transparent; -moz-appearance: textfield; appearance: textfield;
}
.qte-input:focus { outline: none; }
.qte-input::-webkit-outer-spin-button, .qte-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.col-md-6 > .qte { max-width: none; height: calc(2.25rem + 2px + .75rem); }
/* Select natif (mobile, sans Tom Select) : même hauteur que le sélecteur de quantité voisin. */
.col-md-6 > select.form-select { min-height: calc(2.25rem + 2px + .75rem); border-color: var(--pi-line-strong); border-radius: 8px; }
.col-md-6 > .qte .qte-btn { flex-basis: 3rem; }

/* ── Liste avec recherche (Tom Select) aux couleurs du site ─────────── */
/* Le thème Bootstrap 5 de Tom Select met bordure et chevron sur l'enveloppe (.form-select). */
.ts-wrapper.form-select { padding: 0; min-height: calc(2.25rem + 2px + .75rem); border-color: var(--pi-line-strong); border-radius: 8px; cursor: pointer; }
.ts-wrapper.form-select .ts-control { min-height: calc(2.25rem + .75rem); padding: .55rem 2.25rem .55rem .75rem; font-size: 1rem; cursor: pointer; }
.ts-wrapper.form-select.focus { border-color: var(--pi-blue); box-shadow: 0 0 0 .2rem rgba(21, 89, 183, .2); }
.ts-wrapper.form-select.focus .ts-control { box-shadow: none; }
.ts-wrapper.single .ts-control input { cursor: text; }
.ts-dropdown { border-color: var(--pi-line-strong); border-radius: 8px; box-shadow: 0 10px 28px -12px rgba(16, 24, 40, .35); margin-top: .3rem; overflow: hidden; }
.ts-dropdown .ts-dropdown-content { max-height: 22rem; padding: .25rem 0; }
.ts-dropdown .ts-dropdown-content .option, .ts-dropdown .ts-dropdown-content .no-results { padding: .7rem 1rem; line-height: 1.3; }
.ts-dropdown .option + .option { border-top: 1px solid #f1f3f6; }
/* Liste ouverte vers le haut : le champ est en bas de page, au-dessus du pied de page */
.ts-vers-haut .ts-dropdown { top: auto; bottom: 100%; margin: 0 0 .35rem; border: 1px solid var(--pi-line-strong); border-radius: 8px; box-shadow: 0 -10px 28px -12px rgba(16, 24, 40, .35); }
.ts-dropdown .active { background: #eef4fd; color: var(--pi-ink); }
.ts-dropdown .selected { font-weight: 600; color: var(--pi-blue); }
.ts-dropdown .option .highlight, .ts-dropdown .highlight { background: #d6e4f8 !important; color: inherit; border-radius: 2px; }
.ts-dropdown .no-results { padding: .5rem .75rem; color: var(--pi-ink-soft); }
.was-validated select:invalid + .ts-wrapper.form-select { border-color: var(--bs-form-invalid-border-color); }
.was-validated select:invalid ~ .invalid-feedback { display: block; }

/* Carte : mention OpenStreetMap obligatoire (licence ODbL) mais discrète, non cliquable */
.pr-carte .leaflet-control-attribution { font-size: .625rem; line-height: 1.4; padding: 0 .35rem; background: rgba(255, 255, 255, .55); color: #8a95a5; border-top-left-radius: 4px; }

/* Héros sur grand écran : texte à gauche, carte de saisie à droite */
@media (min-width: 992px) {
  .hero-inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 28rem);
    grid-template-areas: "titre form" "sous form";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    align-content: center;
    min-height: 0;
  }
  .hero-title { grid-area: titre; align-self: end; font-size: clamp(2rem, 3.2vw, 3rem); }
  .hero-sub { grid-area: sous; align-self: start; margin-bottom: 0; }
  .hero .plaque-form { grid-area: form; justify-self: stretch; width: 100%; max-width: none; }
  .hero { padding-block: 3.25rem; }
  .hero {
    background:
      linear-gradient(100deg, rgba(14, 20, 28, .86) 0%, rgba(14, 20, 28, .74) 38%, rgba(14, 20, 28, .4) 58%, rgba(14, 20, 28, .25) 100%),
      var(--hero-img, none) center / cover no-repeat,
      var(--pi-ink);
  }
}
@media (min-width: 1200px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3.5rem; }
  .hero .plaque-form { padding: 1.4rem 1.4rem 1.5rem; }
  .hero .plaque { height: 84px; }
  .hero .plaque-band { flex-basis: 62px; }
  .hero .plaque-stars { width: 34px; height: 34px; }
  .hero .plaque-input { font-size: 48px; }
  .hero .btn-cta { height: 3.6rem; font-size: 1.2rem; }
}


/* ── Choix en liste : une ligne par type (plaques, fixations, accessoires) ─────
   Visuel à gauche, nom et description au centre, prix aligné à droite : les prix se
   comparent d'un coup d'œil et les textes ne passent plus à la ligne. */
.choix-plaques.choix-plaques--liste { grid-template-columns: 1fr; gap: .65rem; }
.choix-plaques--liste .choix-plaque > label,
.choix-plaques--liste .carte-accessoire { position: relative; flex-direction: row; align-items: stretch; }
.choix-plaques--liste .choix-plaque-scene { position: static; flex: 0 0 13rem; min-height: 0; padding: .9rem 1rem; }
.choix-plaques--options.choix-plaques--liste .choix-plaque-scene { flex-basis: 8.5rem; }
.choix-plaques--liste .choix-plaque-coche { top: 50%; right: 1.1rem; width: 1.5rem; height: 1.5rem; transform: translateY(-50%); }
.choix-plaques--liste .choix-plaque-corps {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center;
  column-gap: 1.25rem; row-gap: .15rem; padding: .95rem 3.75rem .95rem 1.25rem;
}
.choix-plaques--liste .carte-accessoire .choix-plaque-corps { padding-right: 1.25rem; }
.choix-plaques--liste .choix-plaque-corps > :not(.choix-plaque-meta) { grid-column: 1; }
.choix-plaques--liste .choix-plaque-nom { font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.choix-plaques--liste .choix-plaque-desc { font-size: .875rem; margin: 0; }
.choix-plaques--liste .choix-plaque-meta {
  grid-column: 2; grid-row: 1 / span 3; align-self: center;
  flex-direction: column; align-items: flex-end; gap: 0; margin: 0; padding: 0; text-align: right;
}
.choix-plaques--liste .choix-plaque-meta strong { font-size: 1.25rem; }
.choix-plaques--liste .choix-plaque-meta strong.est-offert { color: #1a6b41; }
/* Options : toutes les lignes à la même hauteur ; la quantité d'un accessoire passe à droite,
   à côté du prix, pour ne pas allonger sa ligne */
.choix-plaques--options.choix-plaques--liste { grid-auto-rows: 1fr; }
.choix-plaques--options .choix-plaque > label,
.choix-plaques--options .carte-accessoire { min-height: 6rem; }
.choix-plaques--liste .carte-accessoire .choix-plaque-corps { grid-template-columns: minmax(0, 1fr) auto auto; }
.choix-plaques--liste .carte-accessoire .qte { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; width: 8.5rem; height: 2.25rem; }
.choix-plaques--liste .carte-accessoire .qte-btn { flex-basis: 2.25rem; }
@media (max-width: 575.98px) {
  .choix-plaques--liste .choix-plaque-scene { flex-basis: 7.5rem; padding: .5rem; }
  .choix-plaques--options.choix-plaques--liste .choix-plaque-scene { flex-basis: 5.5rem; }
  .choix-plaques--liste .choix-plaque-corps { grid-template-columns: 1fr; padding: .75rem 2.6rem .75rem .85rem; }
  .choix-plaques--liste .carte-accessoire .choix-plaque-corps { padding-right: .85rem; grid-template-columns: 1fr; }
  .choix-plaques--liste .carte-accessoire .qte { grid-column: 1; grid-row: auto; margin-top: .5rem; }
  .choix-plaques--options.choix-plaques--liste { grid-auto-rows: auto; }
  .choix-plaques--options .choix-plaque > label { min-height: 7.5rem; }
  .choix-plaques--liste .choix-plaque-meta { grid-column: 1; grid-row: auto; flex-direction: row; align-items: baseline; gap: .3rem; padding-top: .3rem; text-align: left; }
  .choix-plaques--liste .choix-plaque-meta strong { font-size: 1.05rem; }
  .choix-plaques--liste .choix-plaque-coche { top: .7rem; right: .7rem; width: 1.35rem; height: 1.35rem; transform: none; }
}

/* Complément de paiement : motif dans le récapitulatif */
.complement-motif { margin: 0 0 1rem; display: grid; gap: .25rem; }
.complement-motif strong { font-weight: 600; }
.complement-motif span { font-size: .9rem; color: var(--pi-ink-soft); }
.complement-a-payer { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; margin-bottom: 1rem; background: #fff8e6; border: 1px solid #f3dfa6; border-radius: var(--pi-radius); }
.complement-a-payer > .bi { font-size: 1.35rem; color: #8a6100; }
.complement-a-payer div { flex: 1 1 auto; display: grid; gap: .1rem; }
.complement-a-payer strong { font-weight: 600; }
.complement-a-payer span { font-size: .9rem; color: var(--pi-ink-soft); }
.complement-a-payer .btn-cta { height: 2.75rem; min-width: 0; font-size: 1rem; padding-inline: 1.25rem; }
@media (max-width: 575.98px) { .complement-a-payer { flex-wrap: wrap; } .complement-a-payer .btn-cta { width: 100%; } }

/* ── Demande de rétractation (retractation.php) ───────────────────── */
.retract-carte { padding: 0; overflow: hidden; }
.retract-tete { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--pi-line); }
.retract-tete h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--pi-ink); }
.retract-tete p { margin: .1rem 0 0; font-size: .875rem; color: var(--pi-ink-soft); }
.retract-icone { width: 2.4rem; height: 2.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #e8f0fb; color: var(--pi-blue); font-size: 1.15rem; }
.retract-intro { margin: 1.25rem 1.5rem 0; font-size: .95rem; color: var(--pi-ink-soft); }
.retract-form { padding: 1.25rem 1.5rem 1.5rem; }
.retract-form .form-label { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }
.retract-form .form-control { border-color: var(--pi-line-strong); background: #fff; }
.retract-form input.form-control { height: 2.9rem; }
.retract-form .form-text { font-size: .825rem; }
.retract-requis { color: #c62828; }
.retract-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.retract-avertissement { display: flex; gap: .6rem; align-items: baseline; margin: 1.5rem 0 1rem; padding: .8rem 1rem; border-radius: 10px; background: var(--pi-surface); font-size: .9rem; color: var(--pi-ink-soft); }
.retract-avertissement .bi { color: var(--pi-blue); }
.retract-bouton { height: 3.1rem; }
.retract-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: 0; padding: .85rem 1.5rem; list-style: none; border-top: 1px solid var(--pi-line); background: #fafbfc; font-size: .85rem; color: var(--pi-ink-soft); }
.retract-pied .bi { margin-right: .35rem; color: var(--pi-blue); }
.retract-erreurs { margin-bottom: 1rem; padding: .85rem 1rem; border-radius: 10px; background: #fff5f5; border: 1px solid #fecaca; color: #a61b1b; font-weight: 500; }
.retract-erreurs ul { margin: 0; padding-left: 1.1rem; }
.retract-ok { text-align: center; padding-block: clamp(2rem, 5vw, 3rem); }
.retract-ok > .bi { font-size: 2.6rem; color: #16a34a; }
.retract-ok h2 { margin: .75rem 0; font-size: 1.25rem; font-weight: 600; color: var(--pi-ink); }
.retract-ok p { max-width: 34rem; margin: 0 auto .75rem; }
.retract-ok .retract-note { font-size: .9rem; color: var(--pi-ink-soft); margin-bottom: 1.5rem; }
.retract-cote { position: sticky; top: 1.5rem; font-size: .925rem; color: var(--pi-ink-soft); }
.retract-cote-titre { margin: 0 0 .4rem; font-size: .95rem; font-weight: 600; color: var(--pi-ink); }
.retract-cote > p { margin-bottom: 1.4rem; line-height: 1.6; }
.retract-cote strong { color: var(--pi-ink); font-weight: 600; }
.retract-details { border-top: 1px solid var(--pi-line); padding: .8rem 0; }
.retract-details:last-child { border-bottom: 1px solid var(--pi-line); }
.retract-details summary { cursor: pointer; font-weight: 500; color: var(--pi-ink); }
.retract-details[open] summary { margin-bottom: .6rem; }
.retract-details p { font-size: .875rem; line-height: 1.6; }
@media (max-width: 575.98px) {
  .retract-tete, .retract-form, .retract-pied { padding-left: 1rem; padding-right: 1rem; }
  .retract-intro { margin-inline: 1rem; }
  .retract-pied { justify-content: flex-start; }
}
@media (max-width: 991.98px) { .retract-cote { position: static; } }
.retract-form #identifiant::placeholder { text-transform: none; }

/* Fin de formulaire (PC) : retour à gauche, bouton principal à droite, sous le dernier bloc. */
.etape-suite { align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.etape-suite .config-retour { margin: 0; }
.etape-suite .btn-cta { min-width: 15rem; height: 3rem; font-size: 1.05rem; box-shadow: none; } /* identique au bouton du récapitulatif */

/* Pied de page du tunnel : libellés courts sur mobile, les trois liens tiennent sur une ligne. */
.footer-mini-liens .lib-court { display: none; }
@media (max-width: 575.98px) {
  .footer-mini-liens { flex-wrap: nowrap; justify-content: center; gap: 1rem; font-size: .9rem; }
  .footer-mini-liens li { white-space: nowrap; }
  .footer-mini-liens .lib-long { display: none; }
  .footer-mini-liens .lib-court { display: inline; }
}