/* Appli OTO MOTION. Charte d'otomotion.fr : noir #111317, gris #1b1d21, bleu #0079f9, coins de 12 px (cartes) et
     8 px (boutons), étiquette de prix inclinée à -20°, verre de la capsule de navigation (#04346821, bord blanc, flou 20 px),
     Termina / Darker Grotesque / Space Mono. Navigation par l'adresse : #accueil, #vehicules, #fiche/<slug>, #import,
     #demande, #recherche/<n>, #recap, #merci, #services ; « +wa » ouvre la feuille WhatsApp. */
  @font-face { font-family: Termina; font-weight: 400; font-display: swap;
    src: url("https://cdn.prod.website-files.com/67653e014d525b137c276d0e/67658891d37afbf5cd224950_Termina-Regular.woff2") format("woff2"); }
  @font-face { font-family: Termina; font-weight: 500; font-display: swap;
    src: url("https://cdn.prod.website-files.com/67653e014d525b137c276d0e/676588911a4105ec4aee31c5_Termina-Medium.woff2") format("woff2"); }
  @font-face { font-family: Termina; font-weight: 600; font-display: swap;
    src: url("https://cdn.prod.website-files.com/67653e014d525b137c276d0e/67658891306d234c821874f6_Termina-Demi.woff2") format("woff2"); }

  :root {
    --noir: #111317; --gris: #1b1d21; --gris-2: #24272d; --gris-3: #30343b;
    --texte: #fff; --doux: rgba(255,255,255,.68); --doux-2: rgba(255,255,255,.46);
    --ligne: rgba(255,255,255,.08); --ligne-2: rgba(255,255,255,.15);
    --bleu: #0079f9; --bleu-fonce: #014996; --vendu: #c74c45; --wa: #1fae54; --etoile: #fade4a;
    --verre: rgba(4,52,104,.13); --verre-bord: rgba(255,255,255,.22);
    --courbe: cubic-bezier(.625,.05,0,1);
    --titre: Termina, "Arial Black", Arial, sans-serif;
    --corps: "Darker Grotesque", "Avenir Next", "Segoe UI", sans-serif;
    --mono: "Space Mono", ui-monospace, Menlo, monospace;
    --haut: max(env(safe-area-inset-top, 0px), 20px);
    --bas: max(env(safe-area-inset-bottom, 0px), 12px);
    --marge: 20px;
    color-scheme: dark;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
  html, body { margin: 0; height: 100%; background: #050607; }
  body { color: var(--texte); font: 500 18px/1.28 var(--corps); -webkit-font-smoothing: antialiased; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  input, textarea { font: inherit; color: inherit; }
  svg { display: block; }

  .app { position: relative; width: 100%; height: 100%; overflow: clip; background: var(--noir); isolation: isolate; }
  /* sur ordinateur : l'appli tient dans un téléphone au centre de la page */
  @media (min-width: 700px) {
    body { display: grid; place-items: center; min-height: 100vh;
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,121,249,.18), transparent 70%), #08090b; }
    .app { width: 393px; height: 852px; border-radius: 54px; box-shadow: 0 0 0 11px #1c1f24, 0 0 0 12px #3a3f47, 0 40px 120px rgba(0,0,0,.7); }
    :root { --haut: 54px; --bas: 30px; }
  }

  /* écrans */
  .ecran { position: absolute; inset: 0; display: none; }
  .ecran.actif { display: block; animation: entree .5s var(--courbe) both; }
  @keyframes entree { from { opacity: 0; transform: translateY(14px); } }
  .defile { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none;
    padding: calc(var(--haut) + 4px) var(--marge) calc(var(--bas) + 120px); }
  .defile::-webkit-scrollbar { display: none; }
  .voile-haut { position: absolute; z-index: 45; top: 0; left: 0; right: 0; height: calc(var(--haut) + 22px); pointer-events: none; opacity: 0; transition: opacity .25s;
    background: linear-gradient(var(--noir) 58%, rgba(17,19,23,0)); }
  .defile-haut .voile-haut { opacity: 1; }
  .halo { position: absolute; top: 0; left: 0; right: 0; height: 420px; pointer-events: none; z-index: -1;
    background: radial-gradient(ellipse 70% 62% at 50% -6%, rgba(0,121,249,.34), rgba(0,121,249,.08) 55%, transparent 75%); }
  .pile { display: flex; flex-direction: column; }
  .pile > * { flex: none; min-width: 0; }

  /* typographie */
  .note { font: 400 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.74); }
  .note b { font-weight: 700; color: #fff; }
  .titre-1 { margin: 0; font: 600 30px/1.04 var(--titre); text-transform: uppercase; letter-spacing: -.005em; }
  .titre-2 { margin: 0; font: 600 15px/1.1 var(--titre); text-transform: uppercase; letter-spacing: .01em; }
  .question { margin: 0; font: 400 26px/1.18 var(--titre); letter-spacing: -.01em; }
  .bleu { color: var(--bleu); }
  .texte { margin: 0; font: 500 18px/1.3 var(--corps); color: var(--doux); text-wrap: pretty; }
  .curseur { display: inline-block; width: 3px; height: .86em; margin-left: 6px; vertical-align: -1px; background: #fff; }
  .curseur { animation: clignote 1s steps(1) infinite; }
  @keyframes clignote { 50% { opacity: 0; } }

  /* éléments de base */
  .rond { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; position: relative;
    background: rgba(17,19,23,.38); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--verre-bord); }
  .rond svg { width: 19px; height: 19px; }
  .rond .point { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 2px var(--noir); }
  .prix { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 30px; padding: 0 16px;
    font: 600 14px/1 var(--titre); text-transform: uppercase; white-space: nowrap; color: #fff; }
  .prix::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--bleu); transform: skew(-20deg); }
  .prix.petit { height: 22px; padding: 0 11px; font-size: 11px; }
  .prix.grand { height: 36px; padding: 0 20px; font-size: 18px; }
  .prix.vendu::before { background: var(--vendu); }
  .bouton { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; width: 100%;
    padding: 10px 10px 10px 20px; border-radius: 8px; background: var(--bleu); color: #fff; text-align: left;
    font: 700 16px/1.05 var(--corps); text-transform: uppercase; letter-spacing: .02em; transition: transform .3s var(--courbe), background-color .3s; }
  .bouton:active { transform: scale(.98); }
  .bouton small { display: block; margin-top: 4px; font: 600 14px/1.1 var(--corps); text-transform: none; letter-spacing: 0; opacity: .82; }
  .bouton .carre { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.42); }
  .bouton .carre svg { width: 15px; height: 15px; }
  .bouton.vert { background: var(--wa); }
  .bouton.verre { background: rgba(255,255,255,.06); border: 1px solid var(--ligne-2); }
  .bouton.contour { background: transparent; border: 1px solid rgba(31,174,84,.75); color: #fff; }
  .bouton.contour .ico-wa { color: var(--wa); }
  .bouton .ico-wa { width: 22px; height: 22px; flex: none; }
  .bouton .gauche { display: flex; align-items: center; gap: 12px; }
  .lien-mono { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); }
  .lien-mono svg { width: 11px; height: 11px; }
  .ligne-titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .carte { background: var(--gris); border-radius: 12px; border: 1px solid rgba(255,255,255,.045); }
  .puce { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 100em;
    border: 1px solid var(--ligne-2); font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.86);
    transition: background-color .25s, color .25s, border-color .25s; }
  .puce.on { background: #fff; border-color: #fff; color: var(--noir); }
  .puce svg { width: 15px; height: 15px; }
  .rangee { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge); scroll-padding: 0 var(--marge); }
  .rangee::-webkit-scrollbar { display: none; }
  .photo { position: relative; overflow: hidden; background: var(--gris-2); }
  .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 56%);
    transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 56%); }
  .etoiles { display: flex; gap: 3px; color: var(--etoile); }
  .etoiles svg { width: 16px; height: 16px; }
  .espace { height: 28px; }

  /* barre d'onglets : capsule de verre (comme la navigation du site) + bouton WhatsApp à part */
  .fondu { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
    background: linear-gradient(rgba(17,19,23,0), rgba(17,19,23,.82) 55%, rgba(17,19,23,.96)); transition: opacity .3s; }
  .onglets { position: absolute; z-index: 40; left: 14px; right: 14px; bottom: calc(var(--bas) - 10px); display: flex; gap: 8px; align-items: center; transition: transform .45s var(--courbe), opacity .3s; }
  .sans-onglets .onglets { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .sans-onglets .fondu { opacity: 0; }
  .capsule { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); height: 62px; padding: 5px; border-radius: 100em;
    background: rgba(18,22,30,.62); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 16px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
  .onglet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 100em;
    color: rgba(255,255,255,.6); font: 700 9px/1 var(--mono); letter-spacing: .01em; text-transform: uppercase; transition: background-color .35s var(--courbe), color .3s; }
  .onglet svg { width: 22px; height: 22px; }
  .onglet.actif { color: #fff; background: rgba(0,121,249,.22); box-shadow: inset 0 0 0 1px rgba(0,121,249,.45); }
  .onglet.actif svg { color: #fff; }
  .bouton-wa { width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--wa);
    border: 1px solid rgba(255,255,255,.28); box-shadow: 0 12px 26px rgba(31,174,84,.32), 0 0 0 5px rgba(31,174,84,.12), inset 0 1px 0 rgba(255,255,255,.25); }
  .bouton-wa svg { width: 28px; height: 28px; }

  /* barre d'action fixe (fiche, résultat, recherche) */
  .barre-action { position: absolute; z-index: 35; left: 0; right: 0; bottom: 0; padding: 26px var(--marge) calc(var(--bas) + 2px); display: flex; gap: 10px; align-items: stretch;
    background: linear-gradient(rgba(17,19,23,0), rgba(17,19,23,.9) 30%, var(--noir)); }
  .barre-action .rond { width: 60px; height: 60px; border-radius: 8px; }
  .barre-action .rond svg { width: 22px; height: 22px; }
  .barre-action .bouton { flex: 1; }

  /* ---------- LANCEMENT ---------- */
  #e-lancement { background: #0a0b0d; }
  #e-lancement .fond { position: absolute; inset: 0; background: url(images/fond-showroom.jpg) 74% 100% / auto 122%; filter: blur(7px) brightness(.5) saturate(.9); transform: scale(1.06); }
  #e-lancement .voile-l { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 48% at 50% -2%, rgba(0,121,249,.5), transparent 72%), radial-gradient(ellipse 70% 30% at 50% 44%, rgba(10,11,14,.55), transparent 80%), linear-gradient(rgba(10,11,14,.55), rgba(10,11,14,.15) 35%, rgba(10,11,14,.35) 60%, rgba(10,11,14,.95)); }
  #e-lancement .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-bottom: 40px; }
  #e-lancement .centre img { width: 196px; filter: drop-shadow(0 0 30px rgba(0,121,249,.45)); }
  #e-lancement .bas { position: absolute; left: 0; right: 0; bottom: calc(var(--bas) + 34px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .chargeur { width: 132px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
  .chargeur i { display: block; width: 46%; height: 100%; background: var(--bleu); box-shadow: 0 0 12px var(--bleu); }
  .chargeur i { animation: charge 1.4s var(--courbe) infinite; }
  @keyframes charge { from { transform: translateX(-100%); } to { transform: translateX(230%); } }

  /* ---------- ACCUEIL ---------- */
  .entete { display: flex; justify-content: space-between; align-items: center; height: 46px; }
  .entete .logo { height: 25px; width: auto; }
  .entete .actions { display: flex; gap: 10px; }
  .salut { margin-top: 20px; display: grid; gap: 10px; }
  .suivi { position: relative; overflow: hidden; margin-top: 24px; padding: 16px 16px 14px; border-radius: 16px; display: grid; gap: 14px;
    background: linear-gradient(140deg, rgba(0,121,249,.32), rgba(1,73,150,.14) 48%, rgba(255,255,255,.035) 100%);
    border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
  .suivi .haut { display: flex; justify-content: space-between; align-items: center; }
  .pastille { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 100em;
    background: rgba(0,121,249,.26); font: 700 9.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
  .pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #58a8ff; box-shadow: 0 0 8px #58a8ff; }
  .suivi h3 { margin: 0; font: 600 17px/1.15 var(--titre); }
  .suivi p { margin: 4px 0 0; font: 500 17px/1.2 var(--corps); color: var(--doux); }
  .etapes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
  .etapes::before, .etapes::after { content: ""; position: absolute; top: 6px; left: 12.5%; right: 12.5%; height: 2px; background: rgba(255,255,255,.14); }
  .etapes::after { right: 62.5%; background: var(--bleu); box-shadow: 0 0 8px rgba(0,121,249,.7); }
  .etapes span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font: 700 8.5px/1 var(--mono); letter-spacing: .05em; color: var(--doux-2); }
  .etapes span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #2b3039; box-shadow: 0 0 0 3px #10203a; }
  .etapes .fait { color: #fff; }
  .etapes .fait::before { background: var(--bleu); }
  .etapes .encours { color: #fff; }
  .etapes .encours::before { background: #10203a; box-shadow: 0 0 0 3px #10203a, inset 0 0 0 3px var(--bleu), 0 0 0 7px rgba(0,121,249,.25); }
  .suivi .pied { display: flex; align-items: center; gap: 12px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.1); }
  .vignettes { display: flex; }
  .vignettes span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #142640; margin-left: -10px; overflow: hidden; background: var(--gris-2) center / 250% no-repeat; display: grid; place-items: center; font: 700 10px/1 var(--mono); }
  .vignettes span:first-child { margin-left: 0; }
  .suivi .pied b { flex: 1; font: 700 16px/1.05 var(--corps); text-transform: uppercase; letter-spacing: .02em; }
  .suivi .pied .carre { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--bleu); }
  .suivi .pied .carre svg { width: 13px; }
  .section { margin-top: 30px; display: grid; gap: 14px; }
  .selection .vignette { position: relative; flex: none; width: 252px; height: 336px; border-radius: 14px; overflow: hidden; scroll-snap-align: start; transition: transform .3s var(--courbe); }
  .selection .vignette:active { transform: scale(.98); }
  .selection .vignette .photo { position: absolute; inset: 0; }
  .selection .vignette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 22%, transparent 46%, rgba(10,11,14,.94) 88%); pointer-events: none; }
  .vignette .dessus { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; }
  .etiquette-verre { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 100em; font: 700 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
    background: rgba(17,19,23,.42); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.2); }
  .vignette .dessus .rond { width: 34px; height: 34px; }
  .vignette .dessus .rond svg { width: 16px; height: 16px; }
  .vignette .dessous { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 4px; }
  .marque { font: 600 20px/1.1 var(--titre); }
  .modele { font: 400 13px/1.25 var(--titre); color: rgba(255,255,255,.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vignette .dessous .prix { margin: 8px 0 0 4px; justify-self: start; }
  .rangee.selection { scroll-snap-type: x mandatory; gap: 12px; }
  .bandeau { position: relative; overflow: hidden; padding: 18px; border-radius: 16px; display: grid; gap: 10px;
    background: radial-gradient(ellipse 90% 120% at 100% 0%, rgba(0,121,249,.55), transparent 60%), linear-gradient(160deg, #0b2a52, #0f1a2a 70%); border: 1px solid rgba(255,255,255,.12); }
  .bandeau h3 { margin: 0; font: 600 18px/1.12 var(--titre); text-transform: uppercase; }
  .bandeau p { margin: 0; font: 500 17px/1.22 var(--corps); color: rgba(255,255,255,.8); max-width: 30ch; }
  .bandeau .mini { display: inline-flex; align-items: center; gap: 12px; justify-self: start; margin-top: 6px; height: 44px; padding: 0 6px 0 16px; border-radius: 8px;
    background: #fff; color: var(--noir); font: 700 15px/1 var(--corps); text-transform: uppercase; letter-spacing: .02em; }
  .bandeau .mini span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--bleu); color: #fff; }
  .bandeau .mini svg { width: 12px; }
  .liste-services { display: grid; }
  .liste-services a { display: flex; align-items: center; gap: 16px; padding: 16px 2px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .liste-services a:first-child { border-top: 1px solid rgba(255,255,255,.1); }
  .liste-services svg.ico { width: 22px; height: 22px; flex: none; }
  .liste-services span { flex: 1; font: 600 16px/1.1 var(--corps); text-transform: uppercase; letter-spacing: .02em; }
  .liste-services svg.chev { width: 16px; height: 16px; color: var(--doux-2); }
  .exception { position: relative; flex: none; width: 200px; scroll-snap-align: start; }
  .exception .photo { height: 236px; border-radius: 12px; }
  .exception .prix { position: absolute; top: 12px; left: 16px; }
  .exception .marque { margin-top: 12px; font-size: 15px; }
  .exception .modele { font-size: 12px; margin-top: 3px; }
  .avis { padding: 20px; display: grid; gap: 10px; justify-items: center; text-align: center; }
  .avis .titre-2 { font-size: 18px; }
  .visite { padding: 18px; display: grid; gap: 14px; }
  .visite .ligne { display: flex; gap: 12px; align-items: flex-start; font: 600 17px/1.2 var(--corps); }
  .visite .ligne svg { width: 20px; height: 20px; flex: none; color: var(--bleu); margin-top: 1px; }
  .visite .ligne small { display: block; font: 500 16px/1.25 var(--corps); color: var(--doux); }
  .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bouton-court { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 8px; border: 1px solid var(--ligne-2);
    background: rgba(255,255,255,.04); font: 700 15px/1 var(--corps); text-transform: uppercase; letter-spacing: .02em; }
  .bouton-court svg { width: 18px; height: 18px; }

  /* ---------- VÉHICULES ---------- */
  .tete { margin-top: 10px; display: grid; gap: 12px; }
  .chercher { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 7px 0 16px; border-radius: 10px; background: var(--gris); border: 1px solid var(--ligne-2); }
  .chercher input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 18px/1 var(--corps); }
  .chercher input::placeholder { color: var(--doux-2); }
  .chercher .go { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--bleu); }
  .chercher .go svg { width: 19px; height: 19px; }
  .resume { display: flex; justify-content: space-between; align-items: center; }
  .resume .compte { font: 600 17px/1.2 var(--corps); }
  .resume .compte b { font-weight: 800; }
  .carte-auto { display: grid; gap: 14px; padding: 8px 8px 16px; transition: transform .3s var(--courbe); }
  .carte-auto:active { transform: scale(.985); }
  .carte-auto .photo { height: 236px; border-radius: 8px; }
  .carte-auto .photo .dessus { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; }
  .carte-auto .photo .dessus .rond { width: 34px; height: 34px; }
  .carte-auto .photo .dessus .rond svg { width: 16px; height: 16px; }
  .carte-auto .infos { padding: 0 8px; display: grid; gap: 12px; }
  .carte-auto .infos .tetiere { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .specs { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 400 11px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.88); }
  .specs span { display: inline-flex; align-items: center; gap: 7px; }
  .specs svg { width: 16px; height: 16px; flex: none; color: rgba(255,255,255,.75); }
  .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .petite { display: grid; gap: 9px; padding: 6px 6px 12px; }
  .petite .photo { height: 168px; border-radius: 7px; }
  .petite .photo .rond { position: absolute; z-index: 2; top: 8px; right: 8px; width: 30px; height: 30px; }
  .petite .photo .rond svg { width: 14px; height: 14px; }
  .petite .infos { padding: 0 5px; display: grid; gap: 3px; }
  .petite .marque { font-size: 14px; }
  .petite .modele { font-size: 11px; }
  .petite .prix { margin: 7px 0 0 4px; justify-self: start; }
  .petite .km { margin-top: 7px; font: 400 9.5px/1 var(--mono); letter-spacing: .03em; color: var(--doux); text-transform: uppercase; }

  /* carte « recherche personnalisée » (comme la liste vide du site) */
  .vide { margin: 4px 0 2px; }
  .carte-cta { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 330px; padding: 20px; border-radius: 12px; overflow: hidden; margin-top: 12px; }
  .carte-cta .photo { position: absolute; inset: 0; z-index: -2; background: #0d1117; }
  .carte-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; mix-blend-mode: multiply; background: linear-gradient(rgba(27,29,33,.9) 3%, rgba(27,29,33,0) 46%, rgba(27,29,33,.9) 94%); }
  .carte-cta h3 { margin: 0; max-width: 90%; font: 600 26px/1.1 var(--titre); text-transform: uppercase; }  /* comme le site : Termina Demi */
  .carte-cta .pied { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
  .carte-cta p { margin: 0; max-width: 23rem; font: 500 20px/1.1 var(--corps); color: #d9d9d9; }
  .carte-cta .fleche { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--bleu); }
  .carte-cta .fleche svg { width: 18px; height: 18px; }

  /* ---------- FICHE ---------- */
  #e-fiche .defile { padding: 0 0 calc(var(--bas) + 120px); }
  .galerie { position: relative; height: 496px; }
  .galerie .piste { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .galerie .piste::-webkit-scrollbar { display: none; }
  .galerie .piste .photo { flex: none; width: 100%; height: 100%; scroll-snap-align: start; }
  .galerie::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,.42), transparent 26%, transparent 70%, rgba(17,19,23,.55)); }
  .galerie .barre-haut { position: absolute; z-index: 3; top: calc(var(--haut) + 2px); left: var(--marge); right: var(--marge); display: flex; justify-content: space-between; }
  .galerie .barre-haut .actions { display: flex; gap: 10px; }
  .galerie .compteur { position: absolute; z-index: 3; left: var(--marge); bottom: 44px; }
  .galerie .points { position: absolute; z-index: 3; right: var(--marge); bottom: 52px; display: flex; gap: 5px; }
  .galerie .points i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
  .galerie .points i.on { width: 18px; border-radius: 3px; background: #fff; }
  .feuillet { position: relative; z-index: 4; margin-top: -26px; padding: 24px var(--marge) 0; border-radius: 26px 26px 0 0; background: var(--noir); display: grid; gap: 18px;
    box-shadow: 0 -1px 0 rgba(255,255,255,.08); }
  .dispo { display: flex; justify-content: space-between; align-items: center; }
  .dispo .note { display: inline-flex; align-items: center; gap: 8px; }
  .dispo .note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 10px var(--bleu); }
  .nom .marque { font-size: 28px; }
  .nom .modele { font-size: 16px; margin-top: 6px; }
  .ligne-prix { display: flex; align-items: center; justify-content: space-between; }
  .ligne-prix .prix { margin-left: 6px; }
  .perf { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 4px; }
  .perf div { display: grid; justify-items: center; gap: 7px; text-align: center; }
  .perf div + div { border-left: 1px solid var(--ligne-2); }
  .perf b { font: 600 20px/1 var(--titre); }
  .perf b small { font-size: 11px; margin-left: 3px; }
  .perf span { font: 400 9.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--doux); }
  .description { margin: 0; font: 500 17px/1.32 var(--corps); color: var(--doux); }
  .description a { color: #fff; font-weight: 700; }
  .caracteristiques { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border-radius: 12px; background: rgba(255,255,255,.06); }
  .caracteristiques div { display: flex; gap: 11px; align-items: center; padding: 14px; background: var(--gris); }
  .caracteristiques svg { width: 20px; height: 20px; flex: none; color: rgba(255,255,255,.8); }
  .caracteristiques span { display: grid; gap: 4px; font: 700 16px/1.1 var(--corps); }
  .caracteristiques small { font: 400 9.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--doux); }

  /* ---------- IMPORT ---------- */
  .formulaire { padding: 16px; display: grid; gap: 12px; border-radius: 16px; background: var(--verre); border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .champ { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px 0 14px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid var(--ligne-2); }
  .champ svg { width: 20px; height: 20px; flex: none; color: var(--doux); }
  .champ input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 18px/1 var(--corps); }
  .champ input::placeholder { color: var(--doux-2); }
  .champ .coller { height: 36px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,.28); font: 700 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
  .comment { display: grid; gap: 0; }
  .etape { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 22px; }
  .etape:last-child { padding-bottom: 0; }
  .etape::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 4px; width: 2px; background: linear-gradient(var(--bleu), rgba(0,121,249,.1)); }
  .etape:last-child::before { display: none; }
  .etape .num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bleu); font: 600 15px/1 var(--titre);
    box-shadow: 0 0 0 5px rgba(0,121,249,.16); }
  .etape b { display: block; margin-top: 2px; font: 700 17px/1.1 var(--corps); text-transform: uppercase; letter-spacing: .02em; }
  .etape p { margin: 4px 0 0; font: 500 16.5px/1.25 var(--corps); color: var(--doux); }
  .garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .garanties div { padding: 14px 10px; display: grid; justify-items: center; gap: 9px; text-align: center; font: 400 9.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.85); }
  .garanties svg { width: 22px; height: 22px; color: var(--bleu); }
  /* résultat */
  .ligne-retour { display: flex; align-items: center; gap: 14px; height: 46px; }
  .ligne-retour .note { flex: 1; }
  .lien-colle { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 12px; background: var(--gris); border: 1px solid rgba(0,121,249,.65); box-shadow: 0 0 0 3px rgba(0,121,249,.14); }
  .lien-colle .ok { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bleu); }
  .lien-colle .ok svg { width: 14px; }
  .lien-colle div { flex: 1; min-width: 0; }
  .lien-colle b { display: block; font: 600 12px/1.25 var(--titre); }
  .lien-colle span { display: block; font: 400 10px/1.35 var(--mono); color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lien-colle .modif { font: 700 10px/1 var(--mono); letter-spacing: .06em; color: var(--bleu); text-transform: uppercase; }
  .resultat { overflow: hidden; border-radius: 16px; background: var(--verre); border: 1px solid rgba(255,255,255,.26); }
  .resultat > .photo { height: 214px; margin: 8px 8px 0; border-radius: 9px; }
  .resultat > .photo .prix { position: absolute; z-index: 2; left: 16px; bottom: 14px; }
  .resultat > .photo .etiquette-verre { position: absolute; z-index: 2; left: 10px; top: 10px; gap: 8px; }
  .drapeau { width: 16px; height: 11px; border-radius: 2px; background: linear-gradient(#000 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); }
  .resultat .corps { padding: 16px 16px 18px; display: grid; gap: 12px; background: radial-gradient(ellipse 80% 70% at 0% 0%, rgba(0,121,249,.2), transparent 70%); }
  .gros-prix { font: 600 38px/1 var(--titre); letter-spacing: -.015em; }
  .gros-prix small { margin-left: 6px; font-size: 13px; letter-spacing: 0; }
  .coches { display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
  .coches span { display: flex; gap: 11px; align-items: flex-start; font: 500 17px/1.22 var(--corps); }
  .coches svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #59a9ff; }
  .coches .prevoir { color: var(--doux); }
  .coches .prevoir svg { color: var(--doux-2); }

  /* demande de prix (annonce non lisible : le client l'envoie, OTO MOTION répond avec le prix) */
  .carte-auto.demande .photo { height: 208px; }
  .majuscules { text-transform: uppercase; }
  .phrase { margin-top: 5px; font: 400 18px/1.2 var(--corps); color: var(--doux); }
  .specs.intitules { color: var(--doux); }
  .specs.intitules svg { color: var(--doux-2); }
  .resultat .demande { margin: 0; font: 600 20px/1.15 var(--titre); }
  .mentions { margin: 2px 0 0; font: 500 15px/1.3 var(--corps); color: var(--doux-2); }

  /* ---------- RECHERCHE ---------- */
  .progression { position: absolute; z-index: 20; top: calc(var(--haut) + 2px); left: var(--marge); right: var(--marge); display: grid; gap: 14px; }
  .progression::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--marge)); right: calc(-1 * var(--marge)); top: calc(-2px - var(--haut)); bottom: -22px; background: linear-gradient(var(--noir) 78%, rgba(17,19,23,0)); }
  .progression .ligne { display: flex; align-items: center; justify-content: space-between; height: 40px; }
  .progression .pct { font: 700 12px/1 var(--mono); letter-spacing: .04em; min-width: 40px; text-align: right; }
  .jauge { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
  .jauge i { display: block; height: 100%; border-radius: 4px; background: var(--bleu); box-shadow: 0 0 12px rgba(0,121,249,.8); transition: width .6s var(--courbe); }
  #e-recherche .defile, #e-recap .defile { padding-top: calc(var(--haut) + 82px); }
  #e-recap .defile { padding-bottom: calc(var(--bas) + 250px); }
  .deja { display: flex; flex-wrap: wrap; gap: 6px; }
  .deja span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 100em; background: rgba(255,255,255,.06); border: 1px solid var(--ligne);
    font: 400 9.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.8); }
  .montant { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--bleu); box-shadow: 0 10px 18px -14px rgba(0,121,249,.9); }
  .montant b { font: 600 46px/1 var(--titre); letter-spacing: -.02em; }
  .montant .curseur { height: 40px; width: 3px; background: var(--bleu); margin-left: 0; align-self: center; }
  .montant span { font: 600 30px/1 var(--titre); color: var(--doux-2); }
  .choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .choix.deux-col { grid-template-columns: 1fr 1fr; }
  .choix button { height: 52px; border-radius: 10px; background: var(--gris); border: 1px solid var(--ligne-2); font: 700 16px/1 var(--corps); letter-spacing: .01em;
    transition: background-color .25s, border-color .25s, transform .25s var(--courbe); }
  .choix button:active { transform: scale(.97); }
  .choix button.on { background: rgba(0,121,249,.2); border-color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
  .choix .pastille-couleur { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -2px; border: 1px solid rgba(255,255,255,.35); }
  .saisie { width: 100%; height: 58px; padding: 0 16px; border-radius: 10px; background: var(--gris); border: 1px solid var(--ligne-2); outline: 0; font: 600 20px/1 var(--corps); }
  .saisie:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0,121,249,.18); }
  textarea.saisie { height: 120px; padding: 14px 16px; resize: none; line-height: 1.3; }
  .champs-contact { display: grid; gap: 10px; }
  .gratuit { text-align: center; }
  .barre-action.colonne { flex-direction: column; gap: 14px; padding-top: 30px; background: linear-gradient(rgba(17,19,23,0), var(--noir) 26px); }
  .barre-action .boutons { display: flex; gap: 10px; }
  /* récapitulatif */
  .recap { padding: 4px 16px; }
  .recap .ligne { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
  .recap .ligne:last-child { border-bottom: 0; }
  .recap .ligne div { flex: 1; display: grid; gap: 5px; }
  .recap small { font: 400 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
  .recap b { font: 700 17.5px/1.15 var(--corps); }
  .recap b em { display: block; margin-top: 3px; font: 500 15.5px/1.2 var(--corps); font-style: normal; color: var(--doux); }
  .recap button { font: 700 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); }
  .accord { display: flex; gap: 12px; align-items: flex-start; font: 500 15.5px/1.25 var(--corps); color: var(--doux); }
  .accord i { width: 22px; height: 22px; flex: none; border-radius: 5px; display: grid; place-items: center; background: var(--bleu); margin-top: 1px; }
  .accord i svg { width: 13px; }

  /* ---------- SERVICES ---------- */
  .vedette { position: relative; display: block; height: 226px; border-radius: 16px; overflow: hidden; }
  .vedette .photo { position: absolute; inset: 0; }
  .vedette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 35%, rgba(8,10,14,.92) 92%); }
  .vedette .dessus { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
  .vedette .dessous { position: absolute; z-index: 2; left: 18px; right: 14px; bottom: 16px; display: flex; align-items: flex-end; gap: 12px; }
  .vedette .dessous div { flex: 1; display: grid; gap: 6px; }
  .vedette h3 { margin: 0; font: 600 19px/1.1 var(--titre); text-transform: uppercase; }
  .vedette p { margin: 0; font: 500 16.5px/1.2 var(--corps); color: rgba(255,255,255,.82); }
  .vedette .carre { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--bleu); }
  .vedette .carre svg { width: 15px; }
  .services { display: grid; }
  .service { display: grid; grid-template-columns: 26px 44px 1fr 16px; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ligne); text-align: left; width: 100%; }
  .service .n { font: 400 11px/1 var(--mono); color: var(--doux-2); }
  .service .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,121,249,.14); color: #fff; border: 1px solid rgba(0,121,249,.28); }
  .service .ic svg { width: 21px; height: 21px; }
  .service b { display: block; font: 700 16.5px/1.1 var(--corps); text-transform: uppercase; letter-spacing: .02em; }
  .service small { display: block; margin-top: 3px; font: 500 15.5px/1.2 var(--corps); color: var(--doux); }
  .service .chev { width: 16px; height: 16px; color: var(--doux-2); }

  /* ---------- FEUILLE WHATSAPP ---------- */
  .voile { position: absolute; z-index: 70; inset: 0; background: rgba(5,6,8,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .4s; }
  .voile.ouvert { opacity: 1; pointer-events: auto; }
  .feuille { position: absolute; z-index: 80; left: 0; right: 0; bottom: 0; padding: 10px var(--marge) calc(var(--bas) + 14px); border-radius: 30px 30px 0 0;
    background: #15171b; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -20px 60px rgba(0,0,0,.6); display: grid; gap: 16px;
    transform: translateY(105%); transition: transform .55s var(--courbe); }
  .feuille.ouvert { transform: none; }
  .feuille .poignee { justify-self: center; width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); }
  .feuille .tete-wa { display: flex; align-items: center; gap: 12px; }
  .avatar { position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #0a0b0d; box-shadow: 0 0 0 2px var(--wa); }
  .avatar img { width: 30px; }
  .avatar::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 3px #15171b; }
  .tete-wa div { flex: 1; display: grid; gap: 5px; }
  .tete-wa b { font: 600 16px/1 var(--titre); }
  .messages { display: grid; gap: 8px; }
  .message { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 13px 14px; border-radius: 14px 14px 14px 4px; background: var(--gris); border: 1px solid var(--ligne-2);
    font: 600 16.5px/1.22 var(--corps); transition: background-color .25s, border-color .25s; }
  .message i { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); }
  .message.on { background: rgba(31,174,84,.13); border-color: rgba(31,174,84,.8); }
  .message.on i { border: 6px solid var(--wa); }
  .horaires { text-align: center; color: var(--doux); }

  /* ---------- BARRE DE NAVIGATION (piste A retenue : nom sous l'icône, icône seule sur l'onglet ouvert) ---------- */
  .onglet .lib { display: block; }
  .onglet svg.logo-onglet { width: 30px; height: 13px; }
  .capsule { height: 64px; }
  .onglet { gap: 6px; font: 700 11.5px/1 var(--corps); letter-spacing: .01em; text-transform: none; color: rgba(255,255,255,.62); }
  .onglet svg { width: 24px; height: 24px; }
  .onglet svg.logo-onglet { width: 30px; height: 13px; margin: 6px 0 5px; }
  .onglet.actif { color: #fff; background: var(--bleu); box-shadow: 0 6px 18px rgba(0,121,249,.42), inset 0 1px 0 rgba(255,255,255,.22); --logo-raie: rgba(255,255,255,.55); }
  .onglet.actif .lib { display: none; }
  .onglet.actif svg { width: 27px; height: 27px; }
  .onglet.actif svg.logo-onglet { width: 34px; height: 15px; margin: 0; }
  /* ---------- ÉTATS DE L'APPLI RÉELLE (chargement, hors ligne, installation, formulaires) ---------- */
  @keyframes reflet { from { background-position: 120% 0; } to { background-position: -120% 0; } }
  .attente { background: linear-gradient(100deg, var(--gris) 30%, #262a31 50%, var(--gris) 70%) 0 0 / 250% 100%; animation: reflet 1.4s linear infinite; border-radius: 12px; }
  .selection .vignette.attente { flex: none; }
  .carte-auto.attente { height: 360px; }
  .petite.attente { height: 260px; }
  .photo.attente { width: 100%; height: 100%; border-radius: 0; }
  .ligne-attente { height: 26px; margin-top: 6px; }
  .ligne-attente.courte { width: 60%; }
  .hors-ligne { display: grid; gap: 12px; justify-items: start; padding: 4px 0 6px; }
  .bouton-court[data-recharger] { padding: 0 18px; }
  a.exception { display: block; }
  .photo.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .description.replie { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .lire-suite { justify-self: start; margin-top: -10px; font: 700 15px/1 var(--corps); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
  .caracteristiques div:last-child:nth-child(odd) { grid-column: span 2; }
  .liens-fiche { display: flex; gap: 10px; flex-wrap: wrap; }
  .liens-fiche .bouton-court { flex: 1 1 140px; }
  .dispo.vendu .note::before { background: var(--vendu); box-shadow: 0 0 10px var(--vendu); }
  button.lien-mono { padding: 0; }
  /* cœur coché : rond rouge, cœur blanc plein, avec un battement */
  .rond.actif { --coeur-fond: #fff; background: #ff3b4f; border-color: #ff3b4f; box-shadow: 0 4px 14px rgba(255,59,79,.45); }
  .rond.actif svg { color: #fff; animation: battement .4s var(--courbe); }
  @keyframes battement { 40% { transform: scale(1.28); } }
  .puces-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .puces-choix .puce { height: 40px; font: 700 16px/1 var(--corps); letter-spacing: .01em; text-transform: none; }
  .champ-q { display: grid; gap: 8px; }
  .champ-q > span { font: 700 13px/1 var(--corps); text-transform: uppercase; letter-spacing: .03em; color: var(--doux); }
  .champ-q b { color: var(--bleu); }
  .saisie::placeholder { color: rgba(255,255,255,.3); }
  .choix:not(.deux-col) { grid-template-columns: repeat(3, 1fr); }
  .montant { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--bleu); box-shadow: 0 10px 18px -14px rgba(0,121,249,.9); }
  .montant input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; font: 600 44px/1.05 var(--titre); letter-spacing: -.02em; color: #fff; }
  .montant input::placeholder { color: rgba(255,255,255,.25); }
  .montant span { font: 600 30px/1 var(--titre); color: var(--doux-2); }
  .erreur { margin: 12px 0 0; font: 600 16px/1.25 var(--corps); color: #ffb4b4; }
  .barre-action .erreur { margin: 0; }
  label.accord { cursor: pointer; }
  .accord input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .accord i { background: #fff; border: 1px solid var(--bleu); color: var(--noir); }
  .accord i svg { opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--courbe); }
  .accord input:checked + i { background: var(--bleu); color: #fff; }
  .accord input:checked + i svg { opacity: 1; transform: none; }
  .accord input:focus-visible + i { box-shadow: 0 0 0 3px rgba(0,121,249,.35); }
  .bouton:disabled { opacity: .45; cursor: default; }
  .bouton.contour.vert { background: var(--wa); border-color: var(--wa); }
  .bouton.contour.vert .ico-wa { color: #fff; }
  .merci { gap: 16px; padding-top: calc(var(--haut) + 40px); }
  .merci .sceau { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--bleu); box-shadow: 0 0 0 10px rgba(0,121,249,.16), 0 0 40px rgba(0,121,249,.5); }
  .merci .sceau svg { width: 32px; height: 32px; color: #fff; }
  .installer { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 44px 14px 14px; border-radius: 16px;
    background: var(--verre); border: 1px solid rgba(255,255,255,.2); }
  .installer img { width: 52px; height: 52px; border-radius: 12px; flex: none; }
  .installer div { flex: 1; display: grid; gap: 3px; }
  .installer b { font: 600 15px/1.15 var(--titre); }
  .installer span { font: 500 16px/1.25 var(--corps); color: var(--doux); }
  .installer svg.en-ligne { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; color: #fff; }
  .installer .mini-bouton { flex: none; height: 38px; padding: 0 14px; border-radius: 8px; background: var(--bleu); font: 700 14px/1 var(--corps); text-transform: uppercase; letter-spacing: .02em; }
  .installer .fermer { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--doux); }
  .installer .fermer svg { width: 16px; height: 16px; }
  .toast { position: absolute; z-index: 90; left: 50%; bottom: calc(var(--bas) + 96px); transform: translateX(-50%); max-width: calc(100% - 40px); padding: 12px 18px;
    border-radius: 100em; background: rgba(30,34,41,.94); border: 1px solid var(--ligne-2); font: 600 16px/1.2 var(--corps); text-align: center; }
  .feuille > .bouton-court { width: 100%; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }