/* Extrait de modules/car_select.php. Ne pas remettre ce CSS en <style> inline :
   les .php sont servis en no-store, ce fichier est cache un an. */
  :root{
    --rpm-bg:#f5f6f7;
    --rpm-card:#ffffff;
    --rpm-muted:#888;
    --rpm-border:#ebedf0;
    --rpm-radius:12px;
    --rpm-radius-sm:9px;
    --rpm-red:#db2828;
    --rpm-focus:#54a4ec;
    --rpm-focus-bg:#eaf4ff;
  }

.rpm-item.keyboard-focus {
  outline: 2px solid var(--rpm-red);
  outline-offset: -2px;
}

  /* modale seulement : la carte de l'accueil (mode intégré) laisse le fond de la page */
  body:not(:has(.rpm-integre)){ background:var(--rpm-bg); margin:0; }
  .rpm-wrap { max-width: 980px; margin: 0 auto; height: 95vh; display:flex; }

  .rpm-page { display:none; flex:1 1 auto; }
  .rpm-page.active { display:flex; flex-direction:column; }

  /* Header fixe (ne scrolle pas) */
  .rpm-page-head{
    background:var(--rpm-bg);
    padding:.75rem 0 0;
    flex:0 0 auto;
  }
  .rpm-brandbar{
    display:flex; align-items:center; gap:.75rem;
    padding: .25rem .25rem .75rem;
  }
  .rpm-brandbar img{ width:48px; height:48px; object-fit:contain; }
  .rpm-brandbar .rpm-btitle{ font-size:16px; font-weight:600; line-height:1.15; }
  .rpm-brandbar .rpm-bsub{ font-size:15px; color:var(--rpm-muted); line-height:1.15; }

  /* Seule la liste scrolle */
  .rpm-panel { flex:1 1 auto; min-height:0; overflow:auto; background:transparent; box-shadow:none; border:none; padding:0rem; }
  .rpm-search { padding:.75rem .5rem .5rem; }
  .rpm-search .input input{ border-radius: var(--rpm-radius-sm)!important; }
  .rpm-section-title{ height:1px; background:#eceef0; margin:.75rem .5rem; }
  .rpm-section-label{ font-size:13px; color:#666; margin:.5rem .75rem; font-weight:600; }

  /* === [5] Champ de recherche actif === */
  .rpm-search .input input{
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, font-size .15s ease;
  }
  /* Style actif en permanence : la barre doit accrocher l oeil des l ouverture,
     pas seulement une fois cliquee. */
  .rpm-search .input input,
  .rpm-search .input input:focus{
    background-color: var(--rpm-focus-bg) !important;
    border-color: var(--rpm-focus) !important;
    box-shadow: 0 0 0 3px rgba(84, 164, 236, 0.18) !important;
    outline: none !important;
  }
  /* Le scale au focus provoquait un leger decalage du champ : retire. */
  .rpm-search{
    transition: background-color .15s ease;
  }

.rpm-meta {
  font-size: 0.9rem;
  color: var(--rpm-muted);
  margin-top: 0.25rem;
}

.rpm-panel {
  scrollbar-gutter: stable both-edges;
  scrollbar-width:initial;
  scrollbar-color: #999 #f5f6f7;
}

.rpm-panel::-webkit-scrollbar { width: 12px; }
.rpm-panel::-webkit-scrollbar-track { background: #f5f6f7; }
.rpm-panel::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 6px; }
.rpm-panel::-webkit-scrollbar-thumb:hover { background-color: #999; }
.rpm-panel::-webkit-scrollbar-button { display: none !important; }
.rpm-panel::-webkit-scrollbar { width: 12px; height: 12px; }
.rpm-panel::-webkit-scrollbar-track { background: #f5f6f7; }
.rpm-panel::-webkit-scrollbar-thumb { background: #ccc; border-radius: 6px; }
.rpm-panel::-webkit-scrollbar-thumb:hover { background: #999; }
.rpm-panel::-webkit-scrollbar-button { display: none; width: 0; height: 0; }


  /* Listes (cartes) */
  .rpm-list{ padding:.25rem .5rem 1rem; }
  .rpm-item{
    background-color:#fff !important;
    border-radius:var(--rpm-radius);
    padding: .9rem 64px .9rem .9rem;
    margin:.6rem 1rem !important;
    display:flex; align-items:center; gap:.9rem;
    position:relative;
    min-height:58px;
    transition: box-shadow .12s ease, border-color .12s ease, transform .05s ease;
    cursor:pointer;
  }
  .rpm-item:hover{ border-color:#dfe3e7; box-shadow:0 2px 8px rgba(0,0,0,.04); }
  .rpm-item .header{ font-weight:600; font-size:1rem !important; color:#111; }
  /* Le titre est enferme dans un <a> : sans couleur explicite il prend
     celle des liens. */
  .rpm-item a, .rpm-item a:hover, .rpm-item .rpm-full-link{ color:inherit; text-decoration:none; }
  .rpm-item .description{ color:#666; margin-top:.2rem; }


.rpm-logo-list{ vertical-align:middle; display:inline-block; margin-right:15px }
.rpm-item .header{ line-height:1.2; }

  /* Image marque en liste */
  .rpm-logo-list{ width:48px; height:48px !important; }

  /* Chevron à droite */
  .rpm-go{ position:absolute; right:10px; top:50%; transform:translateY(-50%); }
  .rpm-arrow{
    width:38px; height:38px; border-radius:10px!important;
    background:#eee!important; color:#666!important; border:none!important;
    box-shadow: inset 0 0 0 1px #e2e2e2!important;
    transition: background .12s ease, color .12s ease;
    pointer-events:none;
  }
  .rpm-item:hover .rpm-arrow{ background:var(--rpm-red)!important; color:#fff!important; box-shadow:none!important; }

  /* Footer en bas, non scrollant */
  .rpm-footer{
    background:var(--rpm-bg);
    padding:10px;
    display:flex; align-items:center; gap:.5rem;
    border-top:1px solid var(--rpm-border);
    flex:0 0 auto;
  }
  .rpm-footer .rpm-back{ margin-left:auto; }
  .rpm-back{
    background:#111!important; color:#fff!important; border:none!important;
    transition: background .12s ease;
  }
  .rpm-back:hover{ background:var(--rpm-red)!important; }

  /* === [4] Légende clavier - desktop uniquement === */
  .rpm-kbd-legend{
    display:none;
    align-items:center;
    gap:1rem;
    font-size:12px;
    color:#777;
    user-select:none;
  }
  @media (hover: hover) and (pointer: fine){
    .rpm-kbd-legend{ display:inline-flex; }
  }
  .rpm-kbd-item{ display:inline-flex; align-items:center; gap:5px; }
  .rpm-kbd-legend kbd{
    display:inline-block;
    min-width:20px;
    padding:2px 6px;
    font:600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align:center;
    background:#fff;
    border:1px solid #d9dde2;
    border-bottom-width:2px;
    border-radius:4px;
    color:#555;
    box-shadow:0 1px 0 rgba(0,0,0,.03);
  }

  .rpm-empty { padding:1.25rem; text-align:center; color:#777; }
  .ui.divided.list > .item { border-top:none!important; }

  /* items cliquables en Step 3 */
  .rpm-link{ color:inherit; text-decoration:none; display:block; }
  .rpm-link:focus{ outline:none; }

/* ===== Recherche magique (page 1) : champ (scanner de carte grise intégré à gauche pour isRoot, loupe ou croix à droite), propositions ===== */
.cs-search{ position:relative; }
.cs-champ{ position:relative; width:100%; }
.cs-champ > input{ width:100%; font-size:16px !important; padding-right:84px !important; }   /* 16 px : pas de zoom automatique sur iOS */
.cs-champ.cs-avec-scan > input{ padding-left:54px !important; }
.cs-loupe, .cs-effacer{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center; color:#64748b; }
.cs-loupe[hidden], .cs-effacer[hidden]{ display:none; }
/* étincelles aux couleurs du halo (même dégradé tournant, découpé par la forme de l'icône) */
.cs-etincelles{ display:block; width:20px; height:20px;
  background:conic-gradient(from var(--cs-a), #7c3aed, #2563eb, #06b6d4, #f472b6, #fb923c, #7c3aed); animation:cs-halo 6s linear infinite;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 64C333 64 344 73 347 86L370 186C376 211 396 231 421 237L521 260C534 263 543 274 543 287C543 300 534 311 521 314L421 337C396 343 376 363 370 388L347 488C344 501 333 510 320 510C307 510 296 501 293 488L270 388C264 363 244 343 219 337L119 314C106 311 97 300 97 287C97 274 106 263 119 260L219 237C244 231 264 211 270 186L293 86C296 73 307 64 320 64zM496 416C503 416 509 421 511 427L519 461C521 469 527 475 535 477L569 485C575 487 580 493 580 500C580 507 575 513 569 515L535 523C527 525 521 531 519 539L511 573C509 579 503 584 496 584C489 584 483 579 481 573L473 539C471 531 465 525 457 523L423 515C417 513 412 507 412 500C412 493 417 487 423 485L457 477C465 475 471 469 473 461L481 427C483 421 489 416 496 416z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 64C333 64 344 73 347 86L370 186C376 211 396 231 421 237L521 260C534 263 543 274 543 287C543 300 534 311 521 314L421 337C396 343 376 363 370 388L347 488C344 501 333 510 320 510C307 510 296 501 293 488L270 388C264 363 244 343 219 337L119 314C106 311 97 300 97 287C97 274 106 263 119 260L219 237C244 231 264 211 270 186L293 86C296 73 307 64 320 64zM496 416C503 416 509 421 511 427L519 461C521 469 527 475 535 477L569 485C575 487 580 493 580 500C580 507 575 513 569 515L535 523C527 525 521 531 519 539L511 573C509 579 503 584 496 584C489 584 483 579 481 573L473 539C471 531 465 525 457 523L423 515C417 513 412 507 412 500C412 493 417 487 423 485L457 477C465 475 471 469 473 461L481 427C483 421 489 416 496 416z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cs-effacer{ border:0; padding:0; border-radius:50%; background:transparent; cursor:pointer; }
.cs-effacer:hover, .cs-effacer:focus-visible{ background:rgba(15,23,42,.08); color:#0f172a; }
.cs-effacer svg{ width:16px; height:16px; fill:currentColor; }
.cs-scan{
  position:absolute; left:5px; top:50%; transform:translateY(-50%); z-index:1; width:40px; height:36px; display:grid; place-items:center;
  padding:0; border:0; border-radius:7px; background:#0f172a; color:#fff; cursor:pointer; transition:background .12s ease;
}
.cs-scan:hover, .cs-scan:focus-visible{ background:var(--rpm-red); }
.cs-scan svg{ width:22px; height:22px; fill:currentColor; }
.cs-search.cs-charge::after{
  content:''; position:absolute; left:.5rem; right:.5rem; bottom:.3rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--rpm-focus), transparent); background-size:40% 100%; background-repeat:no-repeat;
  animation:cs-charge 1s linear infinite;
}
@keyframes cs-charge{ from{ background-position:-40% 0; } to{ background-position:140% 0; } }

.cs-sugg[hidden]{ display:none; }
.cs-sugg{ padding-bottom:0; }
.cs-n{ color:#94a3b8; font-weight:500; margin-left:4px; }
.rpm-item.cs-best{ box-shadow:0 0 0 2px var(--rpm-red); }
.rpm-item.cs-best .rpm-arrow{ background:var(--rpm-red)!important; color:#fff!important; box-shadow:none!important; }

.cs-mod .rpm-logo-list{ flex:0 0 auto; margin:0; }
.cs-mod .content, .cs-veh .content{ min-width:0; }
.cs-veh .rpm-full-link{ display:flex; align-items:center; gap:.9rem; width:100%; min-width:0; }
.cs-veh-img{ flex:0 0 auto; width:72px; height:48px; object-fit:contain; border-radius:6px; }
.cs-veh-img.cs-logo-repli{ width:48px; margin:0 12px; }
.cs-veh-mod{ color:#475569; font-size:.92rem; margin-top:.15rem; overflow-wrap:anywhere; }
.cs-veh .rpm-meta{ margin-top:.15rem; }
/* véhicules : carte moins rembourrée, la vignette TecDoc (beaucoup de blanc autour de la voiture) prend la place */
.rpm-item.cs-veh{ padding:.45rem 64px .45rem .4rem; }
.rpm-item.cs-veh .cs-veh-img{ width:124px; height:78px; margin:-4px 0; mix-blend-mode:multiply; }
.rpm-item.cs-veh .cs-veh-img.cs-logo-repli{ width:52px; height:52px; margin:0 36px; }
@media (max-width:600px){
  .cs-veh-img{ width:56px; height:40px; }
  .rpm-item.cs-veh{ padding-right:56px; gap:.6rem; }
  .rpm-item.cs-veh .cs-veh-img{ width:72px; height:48px; margin:0 -4px; }
  .rpm-item.cs-veh .cs-veh-img.cs-logo-repli{ width:40px; height:40px; margin:0 12px; }
}

/* Halo « IA » du champ (façon Apple Intelligence) : dégradé tournant flou derrière, liseré dégradé net autour ; plus vif au focus */
@property --cs-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.cs-champ{ isolation:isolate; border-radius:12px; }
.cs-champ::before, .cs-champ::after{
  content:''; position:absolute; inset:-1.5px; border-radius:12.5px; pointer-events:none; z-index:-1;
  background:conic-gradient(from var(--cs-a), #7c3aed, #2563eb, #06b6d4, #f472b6, #fb923c, #7c3aed);
  animation:cs-halo 6s linear infinite;
}
.cs-champ::before{ inset:-2px; filter:blur(9px); opacity:.18; transition:opacity .25s ease; }
.cs-champ::after{ opacity:.45; transition:opacity .25s ease; }
.cs-champ:focus-within::before{ opacity:.32; }
.cs-champ:focus-within::after{ opacity:.7; }
@keyframes cs-halo{ to{ --cs-a:360deg; } }
.rpm-search.cs-search .cs-champ > input,
.rpm-search.cs-search .cs-champ > input:focus{
  background-color:#fff !important; border:0 !important; border-radius:11px !important; box-shadow:none !important;
  height:48px; color:#0f172a;
}
@media (prefers-reduced-motion: reduce){ .cs-champ::before, .cs-champ::after, .cs-etincelles{ animation:none; } }

/* Champ aligné sur les cartes de la liste : retrait mesuré par le JS du sélecteur (alignerChamp, gouttière de la barre de défilement
   comprise, variable selon le navigateur) ; 16 px en attendant */
.rpm-search.cs-search{ padding:14px var(--cs-droite, 16px) 12px var(--cs-gauche, 16px); }

/* Ordinateur (admins) : une photo de carte grise glissée sur le champ est lue par l'IA (le scanner caméra est réservé aux mobiles) */
.cs-depot-msg{ position:absolute; inset:0; z-index:2; display:none; align-items:center; justify-content:center; border-radius:11px;
  border:2px dashed #7c3aed; background:rgba(250,245,255,.96); color:#4c1d95; font-weight:600; font-size:15px; pointer-events:none; }
.cs-champ.is-depot .cs-depot-msg{ display:flex; }
.cs-champ.is-depot::before{ opacity:.45; }
/* vignette TecDoc des modèles (liste d'une marque, recherche magique) */
.rpm-item.cs-mod-vig, .rpm-item.cs-mod{ display:flex; align-items:center; gap:12px; }
.rpm-item.cs-mod-vig .cs-veh-img, .rpm-item.cs-mod .cs-veh-img{ width:84px; height:52px; mix-blend-mode:multiply; }
.rpm-item.cs-mod-vig .content{ flex:1; min-width:0; }

/* ===== Ce que la barre comprend : texte indicatif défilant (type de recherche + exemple), « i » (saisie expliquée, carte grise) ===== */
.cs-ph{ position:absolute; top:0; bottom:0; left:15px; right:84px; overflow:hidden; pointer-events:none; }
.cs-avec-scan .cs-ph{ left:55px; }
.cs-champ.has-val .cs-ph, .cs-champ.is-depot .cs-ph{ display:none; }
.cs-ph-l{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:16px; line-height:1.3; color:#94a3b8; animation:cs-ph-entre .45s cubic-bezier(.2,.8,.2,1) both; }
.cs-ph-l b{ font-weight:600; color:#64748b; }
.cs-ph-l.sort{ animation:cs-ph-sort .45s cubic-bezier(.4,0,.6,1) both; }
@keyframes cs-ph-entre{ from{ transform:translateY(40%); opacity:0; } to{ transform:translateY(-50%); opacity:1; } }
@keyframes cs-ph-sort{ from{ transform:translateY(-50%); opacity:1; } to{ transform:translateY(-140%); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cs-ph-l, .cs-ph-l.sort{ animation:none; } .cs-ph-l.sort{ display:none; } }

.cs-info{ position:absolute; right:42px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center;
  padding:0; border:0; border-radius:50%; background:transparent; color:#64748b; cursor:pointer; transition:background .12s ease, color .12s ease; }
.cs-info:hover, .cs-info:focus-visible, .cs-info.is-actif{ background:rgba(15,23,42,.07); color:#0f172a; }
.cs-info svg{ width:20px; height:20px; }

.cs-cg[hidden]{ display:none; }
.cs-cg{ position:absolute; z-index:30; top:calc(100% + 10px); left:0; right:0; max-width:420px; margin-left:auto; padding:14px 12px 12px;
  border:1px solid rgba(15,23,42,.08); border-radius:14px; background:#fff; color:#0f172a; box-shadow:0 18px 44px rgba(15,23,42,.2); text-align:left; }
.cs-cg::before{ content:''; position:absolute; top:-7px; right:52px; width:12px; height:12px; background:#fff; transform:rotate(45deg);
  border-left:1px solid rgba(15,23,42,.08); border-top:1px solid rgba(15,23,42,.08); }
.cs-aide{ margin:0 2px 14px; font-size:13px; line-height:1.4; color:#475569; }
.cs-aide strong{ display:block; margin-bottom:6px; font-size:14px; color:#0f172a; }
.cs-aide ul{ margin:0 0 8px; padding:0; list-style:none; }
.cs-aide li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px solid rgba(15,23,42,.06); }
.cs-aide li span{ font-weight:600; color:#0f172a; }
.cs-aide code{ font:600 13px/1.3 "Courier New", ui-monospace, monospace; color:#334155; white-space:nowrap; }
.cs-aide p{ margin:4px 0 0; }
.cs-cg-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 2px 8px; }
.cs-cg-tete strong{ font-size:14px; }
.cs-cg-tete span{ font-size:12px; color:#64748b; white-space:nowrap; }
/* permis de circulation : les trois cases utiles (15 plaque, 18 matricule, 24 réception par type), à l'image du document */
.cs-cg-carte{ overflow:hidden; border:1.5px solid #4b5563; border-radius:4px; background:linear-gradient(135deg, #eef0de, #e2e6cd);
  color:#1f2937; font-family:Arial, Helvetica, sans-serif; }
.cs-cg-l{ display:grid; grid-template-columns:28px minmax(0, 1fr) minmax(0, 1.2fr); min-height:66px; }
.cs-cg-l + .cs-cg-l{ border-top:1.5px solid #4b5563; }
.cs-cg-n{ padding-top:7px; text-align:center; font-size:12px; font-weight:700; border-right:1px solid #9ca3af; }
.cs-cg-lib{ padding:6px 8px; font-size:10.5px; line-height:1.25; color:#374151; border-right:1.5px solid #4b5563; overflow-wrap:anywhere; }
.cs-cg-v{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:5px; padding:6px 10px; min-width:0; }
.cs-cg-v b{ font:600 19px/1.1 "Courier New", ui-monospace, monospace; letter-spacing:.02em; color:#111827; white-space:nowrap; }
.cs-cg-v em{ max-width:100%; padding:2px 8px; border-radius:999px; background:#0f172a; color:#fff; font:normal 700 11px/1.35 var(--font-primary), Arial, sans-serif; }
.cs-cg-note{ margin:9px 2px 0; font-size:12px; line-height:1.35; color:#475569; }

/* Étapes Modèles et Motorisations : même barre que la recherche (filtre de la liste) */
.rpm-search.cs-filtre .cs-champ > input{ padding-right:44px !important; }

/* ===== Carte de l'accueil (mode intégré, includes/home.php → modules/dropdown/dropdown_cars.php) =====
   Compacte : titre, barre, Auto / Moto / Pneus, top 6 des marques, « Toutes les marques ». Active (.is-ouvert) : propositions sous la barre
   (1 à 3 : hauteur naturelle) ; .is-haut (toutes les marques, plus de 3 propositions, modèles, motorisations) : hauteur posée par le JS
   (animerCarte) ; #rpv-grille.rpv-ouvert : la carte s'élargit, la publicité se resserre (ordinateur). Listes en une colonne, comme la modale. */
.rpm-wrap.rpm-integre{ position:relative; max-width:none; height:auto; margin:0; color:#0f172a; text-align:left; transition:height .5s cubic-bezier(.4,0,.2,1); }
.rpm-integre .rpm-page.active{ min-width:0; }
.rpm-integre .rpm-page-head{ background:transparent; padding:0; }
.rpm-integre .rpm-search.cs-search{ padding:0; }
.cs-int-titre{ margin:0 0 10px 6px; font-size:15px; font-weight:800; line-height:1.25; color:#0f172a; }
.rpm-integre:not(.is-ouvert) #page-brands .rpm-panel,
.rpm-integre:not(.is-haut) #page-brands .rpm-footer{ display:none; }
.rpm-integre.is-ouvert .cs-accueil{ display:none; }
.rpm-integre .rpm-panel{ margin-top:8px; scrollbar-gutter:auto; }
.rpm-integre .rpm-list{ padding:.25rem 2px .75rem; }
.rpm-integre .rpm-item{ margin:.5rem 0 !important; background-color:#f4f5f7 !important; }
.rpm-integre .rpm-item:hover{ background-color:#eceef2 !important; box-shadow:none; }
.rpm-integre .rpm-section-label{ margin:.8rem .25rem .3rem; }
.rpm-integre .rpm-brandbar{ padding:0 0 .5rem; }
.rpm-integre .rpm-search.cs-filtre{ padding:.25rem 0; }
.rpm-integre .rpm-footer{ padding:10px 0 0; background:transparent; }

.cs-accueil{ margin-top:16px; }
.cs-accueil > .ui.buttons{ display:flex; width:100%; margin-bottom:16px; }
.cs-accueil > .ui.divider{ display:none; }
.cs-top{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.cs-top-m{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:76px; padding:8px 4px;
  border:0; border-radius:10px; background:#f5f5f5; color:#0f172a; font:600 12.5px/1.15 var(--font-primary), Arial, sans-serif; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease; }
.cs-top-m img{ width:40px; height:40px; object-fit:contain; mix-blend-mode:multiply; }
.cs-top-m span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-top-m:hover, .cs-top-m:focus-visible{ background:#fff; box-shadow:inset 0 0 0 2px #0f172a; outline:none; }
.cs-toutes{ position:relative; display:flex; align-items:center; width:100%; height:48px; margin-top:8px; padding:0 52px 0 14px; border:0;
  border-radius:8px; background:#f5f5f5; color:#555; font:400 1rem/1 var(--font-primary), Arial, sans-serif; text-align:left; cursor:pointer; }
.cs-toutes-go{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center;
  border-radius:8px; background:#0f172a; color:#fff; transition:background .12s ease; }
.cs-toutes-go svg{ width:16px; height:16px; fill:currentColor; }
.cs-toutes:hover .cs-toutes-go, .cs-toutes:focus-visible .cs-toutes-go{ background:var(--rpm-red); }

/* Ordinateur, beaucoup de propositions : la carte s'élargit jusqu'à une largeur fixée (--rpv-l, au plus la moitié de la grille), la
   publicité se resserre et reste visible */
#rpv-grille{ --rpv-l:680px; }
@media (min-width:992px){
  #rpv-carte, #rpv-pub{ transition:width .55s cubic-bezier(.4,0,.2,1); }
  #rpv-grille.rpv-ouvert > #rpv-carte.column{ width:min(50%, var(--rpv-l)) !important; }
  #rpv-grille.rpv-ouvert > #rpv-pub.column{ width:calc(100% - min(50%, var(--rpv-l)) - 60px) !important; }
}
@media (max-width:767px){ .rpm-integre .rpm-kbd-legend{ display:none; } }
/* carte dépliée en hauteur : l'avis Google attend sous la carte compacte */
@media (prefers-reduced-motion: reduce){ .rpm-wrap.rpm-integre, #rpv-carte, #rpv-pub{ transition:none; } }

/* Plaque incomplète : la recherche attend une confirmation (toucher la ligne ou Entrée) ; la plaque dessinée comme une plaque suisse */
.rpm-item.cs-action{ display:flex; align-items:center; gap:14px; }
.cs-plaque{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:4px 8px; border:2px solid #111; border-radius:5px; background:#fff;
  color:#111; font:700 17px/1.1 Arial, Helvetica, sans-serif; letter-spacing:.06em; white-space:nowrap; }
.cs-plaque img{ width:16px; height:18px; object-fit:contain; }
/* écusson du canton découpé à la forme de l'écusson suisse (masque), comme sur la plaque */
.cs-plaque img.cs-canton{ object-fit:cover; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 604 669'%3E%3Cpath d='M302 2C402 2 502 19 602 52C602 286 604 534 302 667C0 534 2 286 2 52C102 19 202 2 302 2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 604 669'%3E%3Cpath d='M302 2C402 2 502 19 602 52C602 286 604 534 302 667C0 534 2 286 2 52C102 19 202 2 302 2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* Carte de l'accueil : barre de défilement fine sans flèches (scrollbar-color / -width laissés à auto : sinon Chrome ignore ::-webkit-scrollbar) */
.rpm-integre .rpm-panel{ scrollbar-width:auto; scrollbar-color:auto; padding-right:4px; }
.rpm-integre .rpm-panel::-webkit-scrollbar{ width:6px; height:6px; }
.rpm-integre .rpm-panel::-webkit-scrollbar-track{ background:transparent; }
.rpm-integre .rpm-panel::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.16); border-radius:6px; }
.rpm-integre .rpm-panel::-webkit-scrollbar-thumb:hover{ background:rgba(15,23,42,.32); }
.rpm-integre .rpm-panel::-webkit-scrollbar-button{ display:none; width:0; height:0; }
@supports not selector(::-webkit-scrollbar){ .rpm-integre .rpm-panel{ scrollbar-width:thin; scrollbar-color:rgba(15,23,42,.22) transparent; } }

/* Carte de l'accueil : propositions plus denses (plus de lignes visibles), pas de vide sous la carte dépliée */
.rpm-integre .rpm-item{ min-height:0; padding:.6rem 56px .6rem .75rem; margin:.4rem 0 !important; }
.rpm-integre .rpm-item .header{ font-size:15px !important; }
.rpm-integre .rpm-item.cs-veh{ padding:.3rem 56px .3rem .35rem; }
.rpm-integre .rpm-item.cs-veh .cs-veh-img{ width:96px; height:60px; margin:-2px 0; }
.rpm-integre .rpm-item.cs-veh .cs-veh-img.cs-logo-repli{ width:44px; height:44px; margin:0 26px; }
.rpm-integre .cs-veh-mod, .rpm-integre .rpm-meta{ font-size:13px; }
.rpm-integre .rpm-item.cs-mod .cs-veh-img, .rpm-integre .rpm-item.cs-mod-vig .cs-veh-img{ width:72px; height:44px; }
.rpm-integre .rpm-arrow{ width:34px; height:34px; }
.rpm-integre .rpm-section-label{ margin:.6rem .25rem .2rem; }
.rpm-integre .rpm-footer{ padding:8px 0 0; }
/* carte dépliée en hauteur : l'avis Google et les intercalaires se replient en même temps qu'elle grandit (et reviennent pendant qu'elle
   rapetisse : la page ne saute pas) */
#rpv-carte .google-rating-badge, #rpv-carte .ui.hidden.divider{ transition:max-height .5s cubic-bezier(.4,0,.2,1), margin .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1), opacity .35s ease; max-height:220px; overflow:hidden; }
#rpv-carte:has(.rpm-integre.is-haut) .google-rating-badge, #rpv-carte:has(.rpm-integre.is-haut) .ui.hidden.divider{ max-height:0; min-height:0; margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; border-width:0; opacity:0; overflow:hidden; }
/* aucune proposition : le message sous la barre, la carte compacte reste */
.rpm-integre.is-vide .cs-accueil{ display:block; order:2; margin-top:6px; }
.rpm-integre.is-vide #page-brands .rpm-list{ padding-top:0; padding-bottom:0; }
.rpm-integre.is-vide #page-brands > .rpm-panel{ order:1; }
.rpm-integre .rpm-empty{ padding:.75rem .5rem .25rem; }

/* Propositions : apparition en fondu, l'une après l'autre */
.cs-sugg > .rpm-item, .cs-sugg > .rpm-section-label{ animation:cs-apparait .38s cubic-bezier(.2,.8,.2,1) both; }
.cs-sugg > :nth-child(2){ animation-delay:.03s; } .cs-sugg > :nth-child(3){ animation-delay:.06s; } .cs-sugg > :nth-child(4){ animation-delay:.09s; }
.cs-sugg > :nth-child(5){ animation-delay:.12s; } .cs-sugg > :nth-child(6){ animation-delay:.15s; } .cs-sugg > :nth-child(n+7){ animation-delay:.18s; }
@keyframes cs-apparait{ from{ opacity:0; transform:translateY(6px); filter:blur(3px); } to{ opacity:1; transform:none; filter:none; } }

/* Véhicule trouvé d'office : liseré « IA » qui tourne et lueur sur la ligne choisie, les autres s'effacent, halo de la barre avivé */
.rpm-wrap{ position:relative; }
.cs-envol-actif .cs-sugg > :not(.is-choisi), .cs-envol-actif #list-brands{ opacity:0; filter:blur(2px); animation:none; transition:opacity .3s ease, filter .3s ease; }
.cs-envol-actif .cs-champ::before{ opacity:.55; filter:blur(14px); }
.cs-envol-actif .cs-champ::before, .cs-envol-actif .cs-champ::after{ animation-duration:1.6s; }
.rpm-item.is-choisi{ background-color:#fff !important; transition:background-color .3s ease; }
/* halo du module : carte de l'accueil (#rpv-carte, arrondi 28 px), sinon le contenu de la modale */
#rpv-carte.rpv-envol, .rpm-wrap.cs-envol-actif:not(.rpm-integre){ position:relative; }
#rpv-carte.rpv-envol::before, .rpm-wrap.cs-envol-actif:not(.rpm-integre)::before{ content:''; position:absolute; inset:-3px; z-index:5; padding:3px; border-radius:31px;
  pointer-events:none; background:conic-gradient(from var(--cs-a), #7c3aed, #2563eb, #06b6d4, #f472b6, #fb923c, #7c3aed); animation:cs-halo 1.6s linear infinite, cs-envol-entre .35s ease both; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rpm-wrap.cs-envol-actif:not(.rpm-integre)::before{ border-radius:15px; }
#rpv-carte.rpv-envol::after, .rpm-wrap.cs-envol-actif:not(.rpm-integre)::after{ content:''; position:absolute; inset:-10px; z-index:-1; border-radius:38px; pointer-events:none;
  background:conic-gradient(from var(--cs-a), #7c3aed, #2563eb, #06b6d4, #f472b6, #fb923c, #7c3aed); filter:blur(28px); opacity:.55; animation:cs-halo 1.6s linear infinite, cs-envol-souffle 1.1s ease-in-out infinite alternate; }
@keyframes cs-envol-entre{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cs-envol-souffle{ from{ opacity:.35; } to{ opacity:.65; } }
@media (prefers-reduced-motion: reduce){ .cs-sugg > *, #rpv-carte.rpv-envol::before, #rpv-carte.rpv-envol::after, .rpm-wrap.cs-envol-actif::before, .rpm-wrap.cs-envol-actif::after{ animation:none; } }

/* Repli de la carte (champ vidé, croix, retour) : court, la carte compacte en fondu */
.rpm-wrap.rpm-integre.is-repli{ transition-duration:.3s; }
#rpv-grille.rpv-vite > #rpv-carte, #rpv-grille.rpv-vite > #rpv-pub,
#rpv-carte:has(.rpm-integre.is-repli) .google-rating-badge, #rpv-carte:has(.rpm-integre.is-repli) .ui.hidden.divider{ transition-duration:.3s; }
.rpm-integre.is-repli .cs-accueil{ animation:cs-apparait .3s cubic-bezier(.2,.8,.2,1) both; }

/* Ordinateur : l'avis Google reste en bas de la carte, quelle que soit la hauteur du contenu (la carte suit la hauteur de la publicité) */
@media (min-width:992px){
  #rpv-carte{ display:flex; flex-direction:column; }
  #rpv-carte > .dps_computer{ flex:1 1 auto; display:flex; flex-direction:column; }
  #rpv-carte .google-rating-badge{ margin-top:auto !important; }
}

/* Scanner : ce qui a été lu (« Identifié · Réception par type 1AS409 »), sous les véhicules ; isRoot : IVI oui / non, châssis */
.cs-sugg > .cs-identifie{ display:flex; align-items:center; gap:10px; margin:.5rem 1rem .4rem; padding:10px 12px; border:1px solid #a7f3d0;
  border-radius:12px; background:#ecfdf5; color:#065f46; animation:cs-apparait .38s cubic-bezier(.2,.8,.2,1) both; }
.rpm-integre .cs-sugg > .cs-identifie{ margin:.5rem 0 .4rem; }
.cs-identifie-ok{ flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#10b981; color:#fff; font-weight:800; }
.cs-identifie-t{ font-size:13px; }
.cs-identifie b{ font:700 16px/1.2 ui-monospace, "Courier New", monospace; letter-spacing:.03em; color:#064e3b; }
.cs-identifie small{ display:block; margin-top:2px; font-size:12px; color:#047857; }
.cs-sugg-etape:not([hidden]){ padding-top:0; margin-top:.2rem; }

/* Halo du véhicule choisi jamais rogné : carte de hauteur naturelle, la liste ne défile pas et déborde ; liste qui défile (carte dépliée,
   modale), lueur à l'intérieur de la ligne */
.rpm-integre:not(.is-haut) #page-brands .rpm-panel{ overflow:visible; }

/* Modèles avec vignette TecDoc : la voiture à gauche, en grand (la règle .ui.list > .item { display:list-item } l'emportait) */
.rpm-list > .rpm-item.cs-mod-vig, .rpm-list > .rpm-item.cs-mod{ display:flex; flex-direction:row; align-items:center; gap:16px; }
.rpm-list > .rpm-item.cs-mod-vig .cs-veh-img, .rpm-list > .rpm-item.cs-mod .cs-veh-img{ flex:0 0 auto; width:128px; height:76px; margin:-6px 0; object-fit:contain; mix-blend-mode:multiply; }
.rpm-list > .rpm-item.cs-mod-vig .content{ flex:1; min-width:0; }
@media (max-width:600px){
  .rpm-list > .rpm-item.cs-mod-vig .cs-veh-img, .rpm-list > .rpm-item.cs-mod .cs-veh-img{ width:96px; height:58px; margin:-4px 0; }
  .rpm-list > .rpm-item.cs-mod-vig, .rpm-list > .rpm-item.cs-mod{ gap:12px; }
}

/* Carte de l'accueil : lignes alignées sur le champ (bords gauche et droit), la barre de défilement dans la marge de la carte ; 2 px à gauche
   pour le liseré de la meilleure proposition */
.rpm-integre .rpm-panel{ margin:8px -14px 0 -2px; padding:0 calc(14px - var(--cs-sb, 6px)) 0 2px; }   /* --cs-sb : largeur réelle de la barre (0 si superposée), mesurée par le JS */
.rpm-integre .rpm-list{ padding-left:0; padding-right:0; }

/* ===== Mobile : allure d'app iOS aux couleurs du site (carte de l'accueil) =====
   Grand titre, commande segmentée Auto / Moto / Pneus (pastille rouge sur piste grise), tuiles de marques arrondies, « Toutes les
   marques » en ligne de liste iOS (chevron), retour au toucher ; la barre garde son halo */
@media (max-width:767px){
  /* grand titre aux couleurs du site, calé sur les titres de section (« Sélection du moment ») */
  .rpm-integre .cs-int-titre{ margin:0 0 12px 0; font-family:var(--font-bold); font-size:28px; font-weight:400; letter-spacing:-.48px; line-height:1.3; }
  .rpm-integre .cs-champ > input{ height:50px !important; border-radius:14px !important; }
  .rpm-integre .cs-champ, .rpm-integre .cs-champ::before, .rpm-integre .cs-champ::after{ border-radius:15px; }
  .rpm-integre .cs-ph-l{ font-size:15px; }

  .cs-accueil{ margin-top:18px; }
  /* lignes de la liste dépliée : toucher */
  .rpm-integre .rpm-item:active{ transform:scale(.985); }
}
@media (max-width:767px){
  .cs-top-m span{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-align:center; line-height:1.15; }
  /* titre de la page masqué (sr-only) : son bloc ne laisse plus de vide au-dessus de la carte */
  .wrap-h > div:has(> h1.sr-only){ margin:0 !important; }
}
.rpm-list > .rpm-item.cs-mod-vig .content, .rpm-list > .rpm-item.cs-mod .content{ width:auto; }   /* .ui.list > .item > .content (100 %) passait sous la flèche */
@media (max-width:767px){
  /* lignes : chevron discret comme une liste iOS ; la meilleure proposition garde son bouton rouge */
  .rpm-integre .rpm-item:not(.cs-best) .rpm-arrow{ width:22px; background:transparent !important; box-shadow:none !important; color:#a1a1aa !important; }
  .rpm-integre .rpm-item{ padding-right:46px; }
  .rpm-integre .rpm-go{ right:8px; }
}

/* ===== Boutons de la carte (ordinateur et mobile) : commande segmentée Auto / Moto / Pneus, tuiles, « Toutes les marques » en ligne de liste
   teintée ; arrondi uniforme (--cs-r) ===== */
.rpm-integre{ --cs-r:14px; }
.cs-accueil > .ui.buttons{ gap:2px; padding:3px; margin-bottom:16px; border-radius:var(--cs-r); background:#eeeef1; box-shadow:none; }
.cs-accueil > .ui.buttons > .button{ flex:1 1 0; height:44px !important; min-width:0; margin:0 !important; padding:0 6px !important;
  display:flex !important; align-items:center; justify-content:center; gap:6px; border:0 !important; border-radius:calc(var(--cs-r) - 3px) !important;
  background:transparent !important; color:#0f172a !important; font-weight:600; font-size:15px; box-shadow:none !important; transition:background .2s ease, box-shadow .2s ease, transform .12s ease; }
.cs-accueil > .ui.buttons > .button:hover{ background:rgba(255,255,255,.6) !important; }
.cs-accueil > .ui.buttons > .button.red{ background:var(--color-primary, #f1283b) !important; color:#fff !important;
  box-shadow:0 2px 8px rgba(241,40,59,.28), 0 1px 2px rgba(15,23,42,.08) !important; }
.cs-accueil > .ui.buttons > .button svg, .cs-accueil > .ui.buttons > .button img{ width:24px !important; height:24px !important; }
.cs-accueil > .ui.buttons > .button:active{ transform:scale(.97); }
.cs-top-m{ border-radius:var(--cs-r); background:#f4f4f6; transition:transform .12s ease, background .12s ease, box-shadow .15s ease; }
.cs-top-m:active{ transform:scale(.96); background:#ebebef; }
.cs-toutes{ height:52px; margin-top:10px; padding:0 40px 0 16px; border-radius:var(--cs-r); color:#0f172a; font-size:16px;
  background:linear-gradient(90deg, rgba(241,40,59,.09), rgba(241,40,59,.035)); transition:background .15s ease; }
.cs-toutes-go{ right:12px; width:24px; height:24px; background:transparent; color:var(--color-primary, #f1283b); border-radius:0; }
.cs-toutes-go svg{ width:15px; height:15px; transform:rotate(-90deg); }
.cs-toutes:hover, .cs-toutes:focus-visible{ background:linear-gradient(90deg, rgba(241,40,59,.14), rgba(241,40,59,.06)); }
.cs-toutes:hover .cs-toutes-go, .cs-toutes:focus-visible .cs-toutes-go{ background:transparent; color:var(--color-primary, #f1283b); }
.cs-toutes:active{ transform:scale(.99); }
.rpm-integre .cs-champ > input{ border-radius:var(--cs-r) !important; }
.rpm-integre .cs-champ, .rpm-integre .cs-champ::before, .rpm-integre .cs-champ::after{ border-radius:calc(var(--cs-r) + 1px); }
@media (max-width:767px){
  .cs-top{ gap:10px; }
  .cs-top-m{ min-height:88px; font-size:13px; gap:7px; }
  .cs-top-m img{ width:46px; height:46px; }
  .cs-top-m:hover, .cs-top-m:focus-visible{ background:#f4f4f6; box-shadow:none; }
  .cs-toutes{ font-size:17px; }
  /* moins de vide : intercalaires de la carte, bas du bandeau, haut de la section suivante */
  #rpv-carte .ui.hidden.divider{ margin:4px 0; }
  #rpv-carte .google-rating-badge{ margin-top:12px !important; }
  #parallax_2{ padding-bottom:12px !important; }
  #rpv-grille{ margin-bottom:0 !important; }   /* la marge négative de la grille faisait remonter la section suivante sur la carte (app iOS) */
  #parallax_2 .wrap-h > .ui.hidden.divider{ margin:0; }
  #parallax_2 + .wrap{ padding-top:10px !important; }
}

/* Mobile, liste ouverte (carte à la hauteur de l'écran) : la page ne défile plus, seule la liste défile et ne déborde pas sur la page */
html.cs-verrou, html.cs-verrou body{ overflow:hidden !important; overscroll-behavior:none; }
html.cs-verrou .rchatshow-chat, html.cs-verrou .wu-fab{ display:none !important; }   /* bulle du chat et assistant : ils recouvraient le bouton retour de la carte */
.rpm-integre .rpm-panel{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
@media (max-width:767px){
  /* moins de marge au-dessus de « Choisis ton véhicule » */
  #rpv-carte{ padding-top:0 !important; }
  #rpv-carte > .dps_computer{ padding-top:6px !important; padding-bottom:8px !important; }
  /* accueil : champ, Auto / Moto / Pneus, tuiles et « Toutes les marques » aux bords du carrousel « Sélection du moment » ; le titre reste aligné
     sur celui de la section (hors univers : leur carte est posée sur le bandeau) */
  #parallax_2:not(.rp-univ-hero) #rpv-carte > .dps_computer{ padding-left:0 !important; padding-right:0 !important; }
  #parallax_2:not(.rp-univ-hero) .rpm-integre .cs-int-titre{ margin-left:15px; }
}
/* app (pas d'avis Google) : l'intercalaire sous la carte garde sa hauteur (pas réduit avec les autres) */
#rpv-carte .ui.hidden.divider.cs-espace-app{ margin:14px 0 !important; }
#rpv-carte:has(.rpm-integre.is-haut) .ui.hidden.divider.cs-espace-app{ margin:0 !important; }

/* Motorisations : vignette TecDoc à gauche (elle change selon la version), comme les modèles */
.rpm-item.cs-mot-vig .rpm-full-link{ display:flex; align-items:center; gap:16px; width:100%; min-width:0; }
.rpm-item.cs-mot-vig .cs-veh-img{ flex:0 0 auto; width:116px; height:70px; margin:-6px 0; object-fit:contain; mix-blend-mode:multiply; }
.rpm-item.cs-mot-vig .cs-veh-img:not([src]){ visibility:hidden; }
.rpm-item.cs-mot-vig .content{ flex:1; min-width:0; width:auto; }
@media (max-width:600px){
  .rpm-item.cs-mot-vig .rpm-full-link{ gap:12px; }
  .rpm-item.cs-mot-vig .cs-veh-img{ width:88px; height:54px; margin:-4px 0; }
}
.cs-veh-img.cs-veh-404{ opacity:.9; }   /* vignette introuvable : voiture « 404 » (svg/vehicule-inconnu.svg) */