/*
 * Pop-ups de la fiche voiture (refonte 19/10/2026, charte UI Autocadre)
 * Toutes les classes commencent par "pp-" : aucune regle partagee de style.css / resp.css n'est modifiee.
 * Les pop-ups sont deplacees en fin de <body> par js/fiche-popups.js (aucun parent ne peut les rogner).
 * Ordinateur / tablette : carte centree en CSS. Telephone (<= 730 px) : formulaires en plein ecran,
 * barre du haut avec "x Fermer", bouton d'envoi fixe en bas. Confirmations : petite carte centree partout.
 * Fichier en ASCII (accents via \00e9 dans les content:).
 */

/* ---------- fond ---------- */
.pp-voile{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a;opacity:.55;z-index:100000}
.pp-voile.pp-on{display:block}

/* ---------- carte ---------- */
/* --pp-haut / --pp-bas : place prise par une pub Google "ancree" (au-dessus de tout, on ne peut pas passer devant) :
   mesuree par js/fiche-popups.js, la pop-up se cale entre les deux */
.pp{display:none;position:fixed;left:50%;top:calc(50% + (var(--pp-haut, 0px) - var(--pp-bas, 0px)) / 2);transform:translate(-50%,-50%);z-index:100001;background:#fff;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.25);width:520px;max-width:calc(100% - 32px);max-height:calc(100vh - 32px - var(--pp-haut, 0px) - var(--pp-bas, 0px));max-height:calc(100dvh - 32px - var(--pp-haut, 0px) - var(--pp-bas, 0px));box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;color:#222;text-align:left;outline:none;flex-direction:column;line-height:1.4}
.pp.pp-on{display:flex}
.pp *, .pp *:before, .pp *:after{box-sizing:border-box}
.pp form{margin:0;padding:0;display:flex;flex-direction:column;min-height:0;flex:1 1 auto;width:auto;float:none;background:none;border:0}

/* en-tete */
.pp-tete{display:flex;align-items:center;gap:12px;padding:18px 56px 14px 22px;border-bottom:1px solid #f0f0f0;position:relative;flex:none}
.pp-rond{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#2977dc;color:#fff;flex:none}
.pp-rond svg{width:18px;height:18px;stroke:#fff}
.pp-rond.pp-rond-gris{background:#5b6472}
.pp .pp-titre{margin:0;padding:0;font-size:19px;font-weight:bold;color:#1f2a37;line-height:1.25;background:none;border:0;text-transform:none;float:none;width:auto;height:auto}
.pp-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;background:none;font:26px/36px Arial,Helvetica,sans-serif;color:#888;cursor:pointer;padding:0;margin:0;border-radius:6px;text-align:center}
.pp-x:hover{color:#222;background:#f1f3f6}
.pp-fermer-tel{display:none}

/* corps */
.pp-corps{padding:16px 22px 6px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
.pp-annonce{display:flex;gap:12px;align-items:center;background:#f5f8fd;border:1px solid #e3ebf7;border-radius:8px;padding:8px;margin:0 0 16px}
.pp-annonce img{width:76px;height:57px;object-fit:cover;border-radius:6px;flex:none;background:#e3e7ed;display:block;margin:0;border:0}
.pp-annonce-t{font-size:14px;font-weight:bold;color:#1f2a37;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp-annonce-s{font-weight:normal;color:#555}
.pp-annonce-p{font-size:15px;font-weight:bold;color:#1f63bd;margin-top:2px}

/* champs */
.pp-champ{margin:0 0 14px;padding:0;float:none;width:auto}
.pp-ligne{display:flex;gap:14px}
.pp-ligne .pp-champ{flex:1;min-width:0}
.pp label.pp-lab, .pp .pp-lab{display:block;font-weight:bold;font-size:14px;color:#222;margin:0 0 5px;padding:0;float:none;width:auto;height:auto;text-align:left;line-height:1.3;background:none;border:0}
.pp .pp-fac{font-weight:normal;color:#777}
.pp input.pp-in, .pp textarea.pp-in{display:block;width:100%;max-width:none;height:44px;border:1.5px solid #d5d8dc;border-radius:6px;padding:0 11px;margin:0;font:16px Arial,Helvetica,sans-serif;color:#222;background:#fff;float:none;box-shadow:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.pp textarea.pp-in{height:104px;padding:10px 11px;line-height:1.45;resize:vertical}
.pp .pp-in::placeholder{color:#8a929e;opacity:1}
.pp .pp-in:focus{border-color:#2977dc;box-shadow:0 0 0 3px rgba(41,119,220,.15);outline:none}
.pp-aide{display:block;font-size:13px;color:#777;margin-top:4px;line-height:1.4}
.pp-err{display:none;font-size:13px;color:#c0392b;margin-top:5px;line-height:1.4}
.pp-err:before{content:"\26A0\00a0"}
.pp-champ.pp-ko .pp-in{border-color:#c0392b;background:#fef8f8}
.pp-champ.pp-ko .pp-err{display:block}
.pp-champ.pp-ko .pp-aide{display:none}

/* questions a ajouter d'un clic */
.pp-puces{display:flex;flex-wrap:wrap;gap:7px;margin:-4px 0 14px;padding:0}
.pp button.pp-puce{border:1px solid #c9ced6;background:#fff;color:#1f2a37;border-radius:999px;height:34px;padding:0 13px;margin:0;font:13.5px Arial,Helvetica,sans-serif;cursor:pointer;transition:border-color .15s,background .15s,color .15s;width:auto;float:none;text-indent:0;box-shadow:none}
.pp button.pp-puce:hover{border-color:#2977dc;background:#f0f6ff;color:#1f63bd}
.pp button.pp-puce.pp-puce-ok{border-color:#2977dc;background:#f0f6ff;color:#1f63bd}

/* phrase d'explication en tete de formulaire */
.pp .pp-info{margin:0 0 14px;padding:0;font-size:14px;color:#555;line-height:1.5}
/* date / heure : meme aspect que les autres champs (listes natives gardees, roue iOS / Android) */
.pp input.pp-in[type="date"], .pp input.pp-in[type="time"]{padding:0 10px;min-width:0;line-height:44px;text-align:left}
.pp input.pp-in[type="date"]::-webkit-date-and-time-value, .pp input.pp-in[type="time"]::-webkit-date-and-time-value{text-align:left}
.pp input.pp-in[type="date"]::-webkit-calendar-picker-indicator, .pp input.pp-in[type="time"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}

/* offre : montant + repere selon l'ecart avec le prix affiche (contrastes >= 4,5:1) */
.pp-montant{position:relative}
.pp .pp-montant input.pp-in{height:52px;font-size:20px;font-weight:bold;padding-right:40px}
.pp-euro{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:bold;color:#555;pointer-events:none}
.pp-repere{display:inline-block;margin-top:7px;font-size:13px;font-weight:bold;line-height:1.4;border-radius:999px;padding:4px 11px;background:#f1f3f6;color:#444}
.pp-repere:empty{display:none}
.pp-repere.pp-r-vert{background:#e7f6ed;color:#16703a}
.pp-repere.pp-r-bleu{background:#eef3fb;color:#1f63bd}
.pp-repere.pp-r-orange{background:#fff1e0;color:#9a4a00}
.pp-repere.pp-r-rouge{background:#fdecea;color:#b42318}
.pp-champ.pp-ko .pp-repere{display:none}

/* signalement : motifs en grandes lignes a cocher (44 px), aucun coche d'office */
.pp-choix{display:flex;flex-direction:column;gap:6px;margin:0}
.pp .pp-choix label{display:flex;align-items:center;gap:10px;min-height:44px;border:1.5px solid #e2e2e2;border-radius:8px;padding:6px 12px;margin:0;font-size:15px;font-weight:normal;color:#222;cursor:pointer;float:none;width:auto;text-align:left;transition:border-color .15s,background .15s}
.pp .pp-choix label:hover{border-color:#2977dc}
.pp .pp-choix input{width:18px;height:18px;margin:0;padding:0;accent-color:#2977dc;flex:none;float:none;border:0}
.pp .pp-choix label:has(input:checked){border-color:#2977dc;background:#f0f6ff;font-weight:bold;color:#1f63bd}
.pp-champ.pp-ko .pp-choix label{border-color:#e9a39b}
.pp-compte{float:right;font-size:12.5px;color:#8a929e;font-weight:normal}
.pp textarea#ppSignalMessage{height:80px}

/* retenir mes coordonnees */
.pp label.pp-retenir{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:normal;color:#555;margin:-4px 0 12px;padding:0;cursor:pointer;float:none;width:auto;text-align:left}
.pp .pp-retenir input{width:18px;height:18px;margin:0;padding:0;accent-color:#2977dc;flex:none;float:none;border:0}

/* pied */
.pp-pied{flex:none;padding:12px 22px 16px;border-top:1px solid #f0f0f0;background:#fff;border-radius:0 0 10px 10px}
.pp-resume{display:none;width:100%;background:#fef2f2;border:1px solid #fca5a5;border-left:4px solid #c0392b;border-radius:6px;padding:10px 14px;margin:0 0 12px;font:14px Arial,Helvetica,sans-serif;color:#7f1d1d;cursor:pointer;text-align:left}
.pp-resume span{text-decoration:underline;color:#c0392b;font-size:13px;margin-left:6px}
.pp.pp-erreurs .pp-resume{display:block}
.pp-boutons{display:flex;gap:10px;align-items:center}
.pp button.pp-go{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;border:0;border-radius:8px;background:#2977dc;color:#fff;font:bold 16px Arial,Helvetica,sans-serif;cursor:pointer;margin:0;padding:0 16px;width:auto;float:none;text-indent:0;transition:background .15s,transform .15s,box-shadow .15s}
.pp button.pp-go svg{width:17px;height:17px;stroke:#fff;flex:none}
.pp button.pp-go:hover{background:#1f63bd;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.12)}
.pp button.pp-go[disabled]{background:#7fa9e4;cursor:wait;transform:none;box-shadow:none}
.pp button.pp-annul{height:48px;padding:0 18px;margin:0;border:1px solid #2977dc;background:#fff;color:#1f63bd;border-radius:8px;font:bold 15px Arial,Helvetica,sans-serif;cursor:pointer;width:auto;float:none}
.pp button.pp-annul:hover{background:#f0f6ff}
.pp-legal{margin:10px 0 0;padding:0;font-size:12px;color:#777;line-height:1.45;text-align:center}
.pp-legal a{color:#1f63bd;text-decoration:underline}
.pp button:focus-visible, .pp a:focus-visible, .pp-resume:focus-visible{outline:2px solid #1f63bd;outline-offset:2px}

/* ---------- confirmation / erreur (carte centree a toutes les tailles) ---------- */
.pp.pp-conf{width:440px;padding:30px 26px 24px;text-align:center}
.pp.pp-conf.pp-on{display:block}
.pp-conf .pp-x{top:10px;right:12px}
.pp-pastille{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#e7f6ed;color:#1a9e4b;margin:0 auto 14px}
.pp-pastille svg{width:30px;height:30px;stroke:currentColor}
.pp-pastille .pp-ic-err, .pp-pastille .pp-ic-tel{display:none}
.pp-conf.pp-conf-tel .pp-pastille{background:#e8f1fc;color:#2977dc}
.pp-conf.pp-conf-tel .pp-ic-ok{display:none}
.pp-conf.pp-conf-tel .pp-ic-tel{display:block;animation:ppSonne 1.2s ease-in-out infinite}
@keyframes ppSonne{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(12deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(0)}}
.pp-conf.pp-conf-err .pp-pastille{background:#fdecea;color:#c0392b}
.pp-conf.pp-conf-err .pp-ic-ok{display:none}
.pp-conf.pp-conf-err .pp-ic-err{display:block}
.pp .pp-c-titre{font-size:21px;font-weight:bold;color:#1f2a37;margin:0 0 10px;padding:0}
.pp .pp-c-texte{font-size:15px;color:#444;line-height:1.55;margin:0 0 8px;padding:0}
.pp .pp-c-mail{font-size:13px;color:#777;margin:0 0 18px;padding:0}
.pp .pp-c-mail strong{display:block;margin-top:2px;font-size:14px;color:#333;overflow-wrap:anywhere;word-break:break-word}
.pp-c-boutons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.pp button.pp-btn{display:inline-block;min-width:150px;background:#2977dc;color:#fff;border:1px solid #2977dc;border-radius:6px;padding:12px 24px;margin:0;font:bold 16px Arial,Helvetica,sans-serif;cursor:pointer;width:auto;height:auto;float:none;text-indent:0}
.pp button.pp-btn:hover{background:#1f63bd;border-color:#1f63bd}
.pp button.pp-btn.pp-btn2{background:#fff;color:#1f63bd;border-color:#2977dc}
.pp button.pp-btn.pp-btn2:hover{background:#f0f6ff}
.pp a.pp-suite{display:inline-block;margin-top:16px;font-size:14px;color:#1f63bd;text-decoration:underline}
.pp a.pp-suite:hover{text-decoration:none}

@media (prefers-reduced-motion:reduce){
	.pp button.pp-go, .pp .pp-in, .pp button.pp-puce{transition:none}
	.pp button.pp-go:hover{transform:none}
	.pp-conf.pp-conf-tel .pp-ic-tel{animation:none}
}

/* ---------- telephone : formulaires en plein ecran ---------- */
@media (max-width:730px){
	.pp:not(.pp-conf){left:0;top:var(--pp-haut, 0px);bottom:var(--pp-bas, 0px);transform:none;width:100%;max-width:none;height:auto;max-height:none;border-radius:0}
	html.pp-bloque-tel, html.pp-bloque-tel body{overflow:hidden}
	.pp:not(.pp-conf) .pp-tete{padding:10px 12px 10px 16px;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
	.pp:not(.pp-conf) .pp-rond{width:32px;height:32px}
	.pp:not(.pp-conf) .pp-titre{font-size:17px;flex:1;min-width:0}
	.pp:not(.pp-conf) .pp-x{display:none}
	.pp button.pp-fermer-tel{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 11px;margin:0;border-radius:999px;background:#f1f3f6;border:1px solid #d5d9e0;color:#1f2a37;font:bold 14px Arial,Helvetica,sans-serif;cursor:pointer;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.08);width:auto;float:none}
	.pp .pp-fermer-tel span{font-size:20px;line-height:1}
	.pp-corps{padding:14px 16px 6px}
	.pp-ligne{flex-direction:column;gap:0}
	.pp-pied{padding:8px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -2px 8px rgba(0,0,0,.06);border-radius:0}
	.pp button.pp-annul{display:none}
	.pp-legal{margin-top:6px;font-size:11.5px}
	.pp.pp-conf{padding:26px 18px 20px}
	.pp-c-boutons{flex-direction:column-reverse}
	.pp button.pp-btn{width:100%}
}