/* ===================================================================
   Fiche voiture en 2 colonnes sur ordinateur (19/10/2026, essai ?fp2=1) - maquette validee le 18/10/2026
   Contenu 680 px (galerie, carte des details, questions, bandes, liens "Occasion ...") + colonne vendeur 300 px fixe au
   defilement (rappel du prix + carte vendeur). Classe .fp2 posee sur #general par fiche-voiture.php. Telephone et tablette
   (< 981 px) : rien ne change ici. Pas de nouveau HTML pour la galerie : c'est l'ancien affichage "Photos"
   (#visu-voiture-photos, fiche/photos.php : grande photo, fleches, partage, coeur, plein ecran, badge similaires, miniatures).
   =================================================================== */
@media (min-width:731px){
 #general.fp2{display:grid;grid-template-columns:680px 300px;column-gap:20px;align-items:start}
 #general.fp2>*{grid-column:1/-1}
 #general.fp2>#content{grid-column:1;grid-row:2;float:none;width:auto;margin:0;min-width:0}
 #general.fp2>#droite.noMobile730{grid-column:2;grid-row:2;float:none;width:300px;margin:0!important;position:sticky;top:70px;align-self:start}
 /* colonne de droite : seulement le rappel du prix, la carte vendeur et "Modifier mon annonce" (pub manuelle retiree,
    liens "Occasion ..." et widget de purge deplaces en bas de la colonne principale par le script de fiche-voiture.php) */

 .f2-prix{background:#fff;border:1px solid #e2e2e2;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:12px 14px;margin:0 0 12px;font-family:Arial,Helvetica,sans-serif}
 .f2-prix .f2-m{display:block;font:bold 15px Arial,Helvetica,sans-serif;color:#1f2a37;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .f2-prix .f2-v{display:block;font-size:13px;color:#5b6472;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
 .f2-prix .f2-l{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
 .f2-prix .f2-p{font:bold 22px/1.1 Arial,Helvetica,sans-serif;color:#1f2a37}
 .f2-prix .f2-bd{background:#e8412c;color:#fff;font:bold 12px Arial,Helvetica,sans-serif;border-radius:4px;padding:2px 6px}
 .f2-prix .f2-i{display:block;font-size:13px;color:#5b6472;margin-top:5px}
 #general.fp2 #droite .vc-card{margin-top:0}
 /* colonne principale */
 #general.fp2 #fiche-voiture,#general.fp2 #content-fiche-voiture{float:none;width:auto;margin:0;border:0;padding:0;background:transparent}
 /* fond gris de la page visible entre les cartes blanches (comme la maquette) ; la galerie garde son fond gris clair */
 #general.fp2 #titre-fiche-voiture,#general.fp2 #bloc-gauche,#general.fp2 #arnaques,#general.fp2 #arnaques1{display:none!important}
 /* galerie = ancien affichage Photos, toujours visible */
 #general.fp2 #visu-voiture-photos{display:block!important;float:none;margin:0 0 14px;width:auto}
 #general.fp2 #img-visu-voiture-photos>div>div[style*="659px"]{width:100%!important;border-radius:8px;overflow:hidden;background:#f3f5f8}
 #general.fp2 #bigPhoto{width:100%!important;height:460px;object-fit:contain;background:#f3f5f8}
 #general.fp2 #thumb-list-desktop{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:8px 0 0;padding:0 0 4px;list-style:none;scrollbar-width:thin}
 #general.fp2 #img-visu-voiture-photos ul li{float:none;flex:none;margin:0;border-radius:5px;overflow:hidden}
 #general.fp2 #img-visu-voiture-photos ul li:not([id]){display:none}
 #general.fp2 #img-visu-voiture-photos ul li img{width:84px;height:63px;object-fit:cover}
 /* carte des details sur toute la largeur */
 #general.fp2 #form-big-screen{display:block!important;float:none;width:auto}
 #general.fp2 #form-big-screen #bloc-droit{float:none;width:auto;margin:0 0 14px}
 #general.fp2 #form-big-screen #details-voiture{float:none;width:auto;margin:0;padding:16px 18px 14px}
 #general.fp2 .fd-tu{grid-template-columns:repeat(4,minmax(0,1fr))}
 #general.fp2 .fd-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
 #general.fp2 #details-voiture ul.fd-o{grid-template-columns:repeat(3,minmax(0,1fr))}
 #general.fp2 .fd-prix .pm-gauge-wrap,#general.fp2 .fd-gl{max-width:420px}
 #general.fp2 .fd-af{max-width:420px}
 /* questions et bandes */
 #general.fp2 #questions-reponses{float:none;width:auto!important;margin:0 0 14px}
 #general.fp2 #annonces-similaires.fb-bloc,#general.fp2 #stock-vendeur-pro.fb-bloc{margin:0 0 14px!important}
 /* bas de la colonne principale : liens "Occasion ..." et widget de purge (deplaces par script) */
 #general.fp2 .f2-bas{clear:both;margin:0 0 14px}
 #general.fp2 .f2-bas .annonces-300{float:none;width:auto;margin:0 0 14px}
}
@media (min-width:731px){
 /* titre, date de mise a jour et fiabilite : en haut de la carte des details (deplaces par le script de fiche/is.not.sold.php) ;
    caches tant qu'ils sont encore en haut de page, pour ne pas les voir sauter */
 #general.fp2 .car_page_name h1.fiche-h1,#general.fp2 .car_page_name .fiche-date,#general.fp2 .car_page_name .bloc-fiabilite{display:none}
 #general.fp2 .f2-titre{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid #e2e2e2}
 #general.fp2 .f2-titre h1.fiche-h1{margin:0 0 4px!important;font:bold 24px/1.25 Arial,Helvetica,sans-serif;color:#1f2a37}
 #general.fp2 .f2-titre h1.fiche-h1 .grisnormal{font-weight:normal;color:#5b6472}
 #general.fp2 .f2-titre .fiche-date{margin:0 0 8px;font-size:13px;color:#5b6472}
 #general.fp2 .f2-titre .bloc-fiabilite{margin:0}
 /* rappel du prix (colonne de droite) : badge cliquable, bulle d'explication */
 .f2-prix .pm-badge-wrap span[class^="badge-pm"]{cursor:pointer}
 .f2-prix{position:relative}.f2-prix .pm-badge-wrap{position:static}
 .f2-prix .pm-popup{left:10px;right:10px;width:auto;max-width:none;top:auto;margin-top:6px;z-index:300}.f2-prix .pm-popup::before{display:none}
}
/* navigation en pastilles (toutes tailles d'ecran, essai ?fp2=1) ; "Voir toutes les ..." en bleu pour les visiteurs venus d'ailleurs */
#general.fp2 #nextPrev,#general.fp2 #respNextPrev,#general.fp2 .nav-prevnext button{border-radius:18px;border-color:#d6dbe3;color:#1f2a37;font-family:Arial,Helvetica,sans-serif}
#general.fp2 #nextPrev.f2-tout,#general.fp2 #respNextPrev.f2-tout{background:#2977dc;border-color:#2977dc;color:#fff;font-weight:bold}
#general.fp2 #nextPrev.f2-tout:hover,#general.fp2 #respNextPrev.f2-tout:hover{background:#1f63bd;border-color:#1f63bd}
/* questions au vendeur (fiche/is.not.sold.php, essai ?fp2=1) : style de l'accueil */
#questions-reponses.f2-qr{float:none;box-sizing:border-box;background:#fff;border:1px solid #e2e2e2;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:14px 16px 16px;font-family:Arial,Helvetica,sans-serif;color:#222}
.f2-qr *{box-sizing:border-box}
.f2-qr-h{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.f2-qr-h svg{width:18px;height:18px;flex:none;stroke:#2977dc;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f2-qr #titre-questions-reponses{background:none!important;float:none!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;border-radius:0!important;font:bold 18px/1.2 Arial,Helvetica,sans-serif!important;color:#1f2a37!important;text-transform:none}
.f2-qr-n{margin-left:auto;font-size:13px;color:#5b6472;white-space:nowrap}
#questions-reponses.f2-qr #content-questions-reponses{float:none;width:auto;height:auto;padding:0;margin:0;border:0;background:none}
#questions-reponses.f2-qr:after{content:"";display:table;clear:both}
.f2-qr-vide{font-size:14px;color:#5b6472;margin:0 0 10px}
.f2-qr-fil{margin:0 0 12px}
.f2-qr-cache{display:none}
#questions-reponses.f2-qr .question,#questions-reponses.f2-qr .reponse{float:none;width:auto;margin:0;padding:10px 12px;border:1px solid #e2e2e2;border-radius:8px;background:#fff;font-size:14px;line-height:1.45}
#questions-reponses.f2-qr .reponse{margin:6px 0 0 28px;background:#f5f8fd;border-color:#d6e2f5}
.f2-qr .question p,.f2-qr .reponse p{margin:0}
#questions-reponses.f2-qr .f2-qr-t{display:flex;align-items:center;gap:5px;font-weight:bold;color:#1f2a37;font-size:13px;margin:0 0 3px}
#questions-reponses.f2-qr .f2-qr-t svg{width:14px;height:14px;flex:none;stroke:#5b6472}
#questions-reponses.f2-qr .reponse .f2-qr-t svg{stroke:#2977dc}
.f2-qr .f2-qr-t span{font-weight:normal;color:#8a929e;margin-left:4px}
.f2-qr-plus{display:block;width:100%;height:40px;margin:0 0 10px;border:0;border-radius:8px;background:#f3f5f8;color:#1f63bd;font:bold 14px Arial,Helvetica,sans-serif;cursor:pointer}
.f2-qr-plus:hover{background:#e8f1fc}
#questions-reponses.f2-qr #content-questions-reponses a.f2-qr-poser{display:flex;width:auto;float:none;padding:0;box-shadow:none;align-items:center;justify-content:center;height:42px;border:1px solid #2977dc;border-radius:8px;background:#fff!important;color:#1f63bd!important;font:bold 14px Arial,Helvetica,sans-serif;text-decoration:none!important}
#questions-reponses.f2-qr #content-questions-reponses a.f2-qr-poser:hover{background:#f5f8fd!important}
@media (max-width:700px){#questions-reponses.f2-qr .reponse{margin-left:16px}}
/* questions / reponses longues : 4 lignes + "Lire la suite" (bouton ajoute par f2QrSuite seulement si le texte est coupe) */
#questions-reponses.f2-qr .f2-qr-txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;overflow-wrap:anywhere}
#questions-reponses.f2-qr .f2-qr-txt.f2-qr-ouvert,#questions-reponses.f2-qr .f2-qr-txt.f2-qr-entier{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
#questions-reponses.f2-qr .f2-qr-suite{display:inline-block;margin:4px 0 0;padding:2px 0;border:0;background:none;color:#1f63bd;font:bold 13px Arial,Helvetica,sans-serif;cursor:pointer}
#questions-reponses.f2-qr .f2-qr-suite:hover{text-decoration:underline}
/* "Gerer mon annonce" (menus/droite/manage.file.php en fp2) : replie sous la carte vendeur */
.f2-gerer{margin:12px 0 0;background:#fff;border:1px solid #e2e2e2;border-radius:8px;font-family:Arial,Helvetica,sans-serif}
.f2-gerer summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:11px 14px;cursor:pointer;list-style:none;font-size:13px;color:#5b6472}
.f2-gerer summary::-webkit-details-marker{display:none}
.f2-gerer summary b{color:#1f63bd;font-size:14px}
.f2-gerer summary:after{content:"\25BE";margin-left:auto;color:#1f63bd}
.f2-gerer[open] summary:after{content:"\25B4"}
.f2-gerer ul{margin:0;padding:0 8px 8px;list-style:none;border-top:1px solid #eef0f3}
.f2-gerer li{margin:0;padding:0}
.f2-gerer a{display:flex;align-items:center;gap:9px;padding:9px 6px;border-radius:6px;color:#1f2a37;font-size:14px;text-decoration:none}
.f2-gerer a:hover{background:#f5f8fd;color:#1f63bd;text-decoration:none}
.f2-gerer a svg{width:17px;height:17px;flex:none;stroke:#2977dc;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f2-gerer a.f2-suppr,.f2-gerer a.f2-suppr:hover{color:#c0392b}.f2-gerer a.f2-suppr svg{stroke:#c0392b}
/* bas de la colonne principale : "Chercher d'autres <marque>" (liens de occasion.droite.php en pastilles) */
#general.fp2 .f2-bas .annonces-300.f2-occ{float:none;width:auto;height:auto;margin:0 0 14px;padding:14px 16px 16px;background:#fff;border:1px solid #e2e2e2;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);font-family:Arial,Helvetica,sans-serif}
#general.fp2 .f2-occ .titre-credit-auto{float:none;width:auto;height:auto;margin:0;padding:0;background:none;border:0;font:bold 18px/1.2 Arial,Helvetica,sans-serif;color:#1f2a37;text-transform:none}
#general.fp2 .f2-occ .f2-occ-st{font-size:13.5px;color:#5b6472;margin:2px 0 10px}
#general.fp2 .f2-occ .enormetrait-gris,#general.fp2 .f2-occ #occas-fiat{float:none;width:auto;height:auto;margin:0;padding:0;border:0;background:none}
#general.fp2 .f2-occ ul.occasion-seo-links{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
#general.fp2 .f2-occ ul.occasion-seo-links li{float:none;width:auto;margin:0;padding:0;background:none;list-style:none}
#general.fp2 .f2-occ ul.occasion-seo-links li:before{display:none}
#general.fp2 .f2-occ ul.occasion-seo-links a{display:inline-block;padding:6px 12px;border:1px solid transparent;border-radius:16px;background:#f3f5f8;color:#1f2a37;font-size:13.5px;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
#general.fp2 .f2-occ ul.occasion-seo-links a:hover{background:#e8f1fc;border-color:#c9d8ee;color:#1f63bd}
/* plein ecran des photos : bouton "Fermer" avec texte (une croix seule se voit mal et on risque de fermer l'onglet du navigateur) */
#general.fp2 #fiche-lightbox #lb-close{top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.4);border-radius:20px;background:rgba(255,255,255,.14);color:#fff;font-size:0;line-height:1;opacity:1;transition:background-color .15s}
#general.fp2 #fiche-lightbox #lb-close:before{content:"\2715";font-size:16px}
#general.fp2 #fiche-lightbox #lb-close:after{content:"Fermer";font:bold 15px Arial,Helvetica,sans-serif}
#general.fp2 #fiche-lightbox #lb-close:hover{background:rgba(255,255,255,.3)}
@media (max-width:700px){#general.fp2 #fiche-lightbox #lb-close{top:10px;right:10px;height:38px;padding:0 14px}}
/* la carte vendeur est flottante (ancien CSS) : son conteneur faisait 0 px de haut, "Gerer mon annonce" passait derriere elle */
#general.fp2 #droite #vendor-big-screen,#general.fp2 #droite #vendor-info{display:flow-root}
.f2-gerer:not([open]) ul{display:none!important}
/* ===== telephone (<= 730 px, seuil du site), essai ?fp2=1 : ordre de la maquette telephone validee =====
   navigation -> photo + miniatures -> carte (titre, date, fiabilite, prix, jauge, Assurer / Financer, tuiles...) -> carte vendeur
   + "Gerer mon annonce" -> Localisation -> questions -> bandes -> "Chercher d'autres ..." ; barre Appeler / Message inchangee */
#general.fp2 #fiche-voiture{background:transparent}
#general.fp2 #content-fiche-voiture{border:0}
@media (max-width:730px){
 #general.fp2 .mobileDetail,#general.fp2 #formulaire-voiture,#general.fp2 #arnaques,#general.fp2 #arnaques1,#general.fp2 #titre-fiche-voiture{display:none!important}
 #general.fp2 #accueil-phone-screen #vendor-big-screen{display:none!important}
 #general.fp2 #vendor-phone{display:block!important}
 #general.fp2 .car_page_name h1.fiche-h1,#general.fp2 .car_page_name .fiche-date,#general.fp2 .car_page_name .bloc-fiabilite{display:none}
 #general.fp2 .f2-titre{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid #e2e2e2}
 #general.fp2 .f2-titre h1.fiche-h1{margin:0 0 4px!important;font:bold 20px/1.25 Arial,Helvetica,sans-serif;color:#1f2a37}
 #general.fp2 .f2-titre h1.fiche-h1 .grisnormal{font-weight:normal;color:#5b6472}
 #general.fp2 .f2-titre .fiche-date{margin:0 0 8px;font-size:13px;color:#5b6472}
 #general.fp2 .f2-titre .bloc-fiabilite{margin:0}
 #general.fp2 .fd-af{display:flex!important}
 #general.fp2 #form-small-screen #details-voiture.fd-carte{margin:12px 0 0}
 #general.fp2 #vendor-phone{margin-bottom:0}
 #general.fp2 #vendor-phone + .f2-gerer{margin:12px 0}
 #general.fp2 .f2-bas{clear:both;margin:14px 0}
 #general.fp2 .f2-bas .annonces-300.f2-occ{margin:0 0 14px}
 #general.fp2 #questions-reponses.f2-qr,#general.fp2 #f2-loc{width:auto;margin:14px 0 0}
}
/* ===== tablette (731 a 980 px), essai ?fp2=1 : memes 2 colonnes que l'ordinateur, colonne principale fluide ===== */
@media (min-width:731px) and (max-width:980px){
 #general.fp2{width:auto!important;max-width:1000px;margin:0 auto;padding:0 12px;box-sizing:border-box;grid-template-columns:minmax(0,1fr) 280px;column-gap:16px}
 #general.fp2>#droite.noMobile730{width:280px}
 #general.fp2 #droite #vendor-info,#general.fp2 #droite .vc-card{width:auto!important;max-width:100%;box-sizing:border-box}
 #general.fp2 .mobileDetail{display:none!important}
 #general.fp2 #bigPhoto{height:340px}
 #general.fp2 .fd-tu{grid-template-columns:repeat(2,minmax(0,1fr))}
 #general.fp2 .fd-l{display:block}
 #general.fp2 #details-voiture ul.fd-o{grid-template-columns:repeat(2,minmax(0,1fr))}
 #general.fp2 .fb-bloc .hb-rail>.hb-card{flex:0 0 max(40%,170px)}
}
/* bandes Similaires / Vehicules du vendeur : nombre de cartes selon la largeur reelle (la suivante depasse toujours un peu)
   <= 480 px : 1 carte + 2/3 de la suivante ; 481-980 px (grand telephone, tablette) : 2 cartes + un bout de la 3e ; ordinateur : 3 */
@media (max-width:730px){#general.fp2 .fb-bloc .hb-rail>.hb-card{flex:0 0 max(40%,170px)}}
@media (max-width:480px){#general.fp2 .fb-bloc .hb-rail>.hb-card{flex:0 0 58%}}
/* telephone (<= 730 px) : page fluide sur toute la largeur, 12 px de marge de chaque cote (l'ancien CSS fixait 372 px :
   bandes grises a gauche et a droite des que l'ecran est plus large qu'un petit telephone) */
@media (max-width:730px){
 #general.fp2{width:auto!important;max-width:none;padding:0 12px;box-sizing:border-box}
 #general.fp2 .car_page_name,#general.fp2 #content,#general.fp2 #fiche-voiture,#general.fp2 #content-fiche-voiture,#general.fp2 #bloc-gauche,#general.fp2 #visu-voiture,#general.fp2 #mobileBloc,#general.fp2 #visu-voiture .swiper-container,#general.fp2 #thumb-strip,#general.fp2 #form-small-screen,#general.fp2 #bloc-droit,#general.fp2 #details-voiture,#general.fp2 #vendor-phone,#general.fp2 #vendor-info,#general.fp2 #vendor-phone .vc-card,#general.fp2 #f2-loc,#general.fp2 #questions-reponses,#general.fp2 #annonces-similaires,#general.fp2 #stock-vendeur-pro,#general.fp2 .f2-bas{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;float:none!important;box-sizing:border-box}
}
/* telephone : carrousel photo = meme cadre 4/3 pour toutes les photos (photo entiere, fond gris clair) ; sinon il prend la hauteur
   de la photo la plus haute et le compteur / badge "Annonces similaires" flottent sous la photo affichee */
@media (max-width:730px){
 #general.fp2 #visu-voiture .swiper-container{height:auto!important}
 #general.fp2 #visu-voiture .swiper-slide{height:auto!important}
 #general.fp2 #visu-voiture .swiper-slide img{display:block;width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:contain;background:#f3f5f8}
}
/* colonne de droite (2 colonnes, des 731 px) : carte vendeur a la largeur de la colonne, comme le rappel du prix et "Gerer mon annonce"
   (l'ancien CSS de la carte lui donne une largeur et des marges fixes ; vu par le gerant sur petit ordinateur) */
@media (min-width:731px){
 #general.fp2>#droite #vendor-big-screen,#general.fp2>#droite #vendor-info,#general.fp2>#droite .vc-card{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;float:none!important;box-sizing:border-box}
}
/* ordinateur : colonne principale elastique (680 px au plus) ; sur un petit ecran (981-1040 px, barre de defilement comprise)
   la page ne deborde plus a droite */
@media (min-width:981px){
 #general.fp2{width:auto!important;max-width:1000px;margin-left:auto;margin-right:auto;grid-template-columns:minmax(0,680px) 300px;justify-content:space-between;box-sizing:border-box}
}
@media (min-width:981px) and (max-width:1040px){
 #general.fp2{padding:0 12px}
}
/* 2 colonnes : galerie au format 4/3 (celui de presque toutes les photos) : la photo remplit le cadre, partage / coeur / fleches /
   plein ecran sont poses SUR la photo (avec 680 x 460, la photo laissait une bande grise de chaque cote et les boutons debordaient) */
@media (min-width:731px){
 #general.fp2 #bigPhoto{height:auto!important;aspect-ratio:4/3;object-fit:contain}
 #general.fp2 .car_page_name{width:auto!important;max-width:100%}
}
/* conteneur #page (1000 px fixes dans l'ancien CSS) : elastique quand il contient la fiche en essai */
#page:has(> #general.fp2){width:auto!important;max-width:1000px;margin-left:auto;margin-right:auto}
/* bouton partage : bleu des actions au survol (le rouge est celui du coeur des favoris) */ #general.fp2 .fiche-share-btn:hover svg{stroke:#2977dc}
#page:has(> #general.fp2) #footer,#page:has(> #general.fp2) #footer .footer-bleu{width:auto!important;max-width:100%;box-sizing:border-box} /* pied de page : 1000 px fixes -> debordait sur petit ecran */
/* format des photos = celui de la 1re photo de l annonce (variable --f2-format posee par le script de fiche-voiture.php, 4/3 par defaut) */
@media (min-width:731px){#general.fp2 #bigPhoto{aspect-ratio:var(--f2-format,1.333)}}
@media (max-width:730px){#general.fp2 #visu-voiture .swiper-slide img{aspect-ratio:var(--f2-format,1.333)}}
/* cadre des photos visible (vu par le gerant) : le gris clair #f3f5f8 se confondait avec le fond de la page (#f4f5f7) -> une photo
   moins large semblait "flotter" et les boutons paraissaient a cote. Fond du cadre #e3e7ed + coins arrondis : bandes visibles. */
#general.fp2 #img-visu-voiture-photos>div>div[style*="659px"],#general.fp2 #bigPhoto{background:#e3e7ed!important}
#general.fp2 #img-visu-voiture-photos>div>div[style*="659px"]{border-radius:8px;overflow:hidden}
@media (max-width:730px){#general.fp2 #visu-voiture .swiper-slide img{background:#e3e7ed}#general.fp2 #visu-voiture .swiper-container{border-radius:8px;overflow:hidden}}
#general.fp2 #thumb-list-desktop{scroll-behavior:smooth} /* la bande de miniatures glisse jusqu a la photo affichee (fiche/photos.php syncDeskThumb) */
/* ===== barre Appeler / Message du bas (menus/droite/btnTelMessage.php, <= 768 px), essai ?fp2=1 =====
   Appeler = action principale (bleu plein + icone telephone) ; Message = secondaire (blanc, contour et texte bleus + icone bulle).
   Avant : "Message" en blanc sur jaune (contraste 1,6:1, le texte noir prevu etait ecrase par .contact-buttons a ; jaune reserve
   a "Vendre ma voiture" par la charte). Marge du bas de l'iPhone (barre d'accueil). */
@media (max-width:768px){
 .contact-buttons{gap:10px;padding:8px 12px max(8px,env(safe-area-inset-bottom))!important;box-sizing:border-box;box-shadow:0 -2px 8px rgba(0,0,0,.08)!important}
 .contact-buttons a{display:flex!important;align-items:center;justify-content:center;gap:8px;margin:0!important;padding:0!important;height:48px;border-radius:8px!important;font:bold 16px Arial,Helvetica,sans-serif!important;box-sizing:border-box}
 .contact-buttons a:before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--f2-ic) center/contain no-repeat;mask:var(--f2-ic) center/contain no-repeat}
 .contact-buttons .btn-call{background:#2977dc!important;color:#fff!important;--f2-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
 .contact-buttons .btn-call:hover{background:#1f63bd!important}
 .contact-buttons .btn-message{background:#fff!important;color:#1f63bd!important;border:1.5px solid #2977dc!important;--f2-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
 .contact-buttons .btn-message:hover{background:#f5f8fd!important}
 /* bande vendeur au-dessus des boutons (avis Google) */
 .contact-strip-avis{gap:6px!important;padding:5px 12px!important;font:13px Arial,Helvetica,sans-serif!important;border-top:1px solid #e2e2e2!important}
 .contact-strip-avis .csa-name{color:#1f2a37}
 .contact-strip-avis .csa-rating{color:#5b6472;font-weight:bold}
 .contact-strip-avis .csa-link{color:#1f63bd!important;font-weight:bold}
 .contact-strip-avis .gr-s{font-size:13px}
}
/* carte vendeur (menus/droite/vendor.info.php), essai ?fp2=1 : titre au style des autres titres (18 px gras, pas en capitales),
   lien "Voir sur la carte", chiffres du bas lisibles (12 px, gris plus soutenu ; avant 10 px #888). Boutons de couleur gardes
   (decision du gerant 19/10 : mesurer d'abord dans GA4). */
#vendor-info .vc-title{font:bold 18px/1.2 Arial,Helvetica,sans-serif!important;color:#1f2a37!important;letter-spacing:0!important;text-transform:none}
#vendor-info .vc-carte{display:inline-block;margin-top:3px;font-size:13px;font-weight:bold;color:#1f63bd;text-decoration:none}
#vendor-info .vc-carte:hover{text-decoration:underline}
#vendor-info .vc-stat b{font-size:12.5px;color:#1f2a37}
#vendor-info .vc-stat small{font-size:12px;color:#5b6472}
/* bouton "Envoyer un message" de la carte vendeur (essai ?fp2=1) : orange profond (#ca520c, texte blanc comme les autres boutons, contraste ~4,6:1 ; l orange vif #f57c00 en blanc ne donnait que 2,9:1) au lieu de l'ambre #e2951a, trop proche du
   jaune de "Vendre ma voiture" (#febc35, reserve au depot d'annonce par la charte) */
#vendor-info .vc-cta-orange{background:#ca520c!important;border-color:#ca520c!important;color:#fff!important}
#vendor-info .vc-cta-orange *{color:#fff!important}
#vendor-info .vc-cta-orange:hover{background:#b14709!important;border-color:#b14709!important}
/* ===== corrections du 19/10/2026 apres les 3 agents testeurs (essai ?fp2=1) ===== */
/* pied de page sur toute la largeur (il etait flottant : 676 px sur ordinateur, 177 px sur telephone) */
#page:has(> #general.fp2) #footer{float:none!important;clear:both;width:100%!important;display:block}
#page:has(> #general.fp2) #footer .footer-bleu{width:100%!important}
/* bande de miniatures : plus de barre de defilement grise (elle suit deja la photo affichee) */
#general.fp2 #thumb-list-desktop{scrollbar-width:none}
#general.fp2 #thumb-list-desktop::-webkit-scrollbar{display:none}
.f2-prix .fd-i{margin-left:-2px}
/* une seule photo : ni fleches ni miniatures */
.f2-photo-unique #general.fp2 a[onclick^="previmage"],.f2-photo-unique #general.fp2 a[onclick^="nextimage"],.f2-photo-unique #general.fp2 a[onclick^="mySwiper.slide"],.f2-photo-unique #general.fp2 #thumb-strip,.f2-photo-unique #general.fp2 #thumb-list-desktop{display:none!important}
/* telephone : carte "Chercher d'autres ..." a la largeur de la colonne (resp.css lui donnait 310 px fixes, elle debordait a 360 px) ;
   bande vendeur (avis) affichee jusqu'a 730 px comme le reste du telephone (elle s'arretait a 700) ; options repliees au-dela de 12 */
@media (max-width:730px){
 #general.fp2 .f2-bas .annonces-300{width:auto!important;max-width:none!important;box-sizing:border-box}
 .contact-strip-avis{display:flex!important}
 #general.fp2 #details-voiture ul.fd-o.fd-o-plie li:nth-child(n+13){display:none}
}
.fd-o-plus{display:none}
@media (max-width:730px){.fd-o-plus{display:block;margin:8px 0 0;padding:4px 0;border:0;background:none;color:#1f63bd;font:bold 14px Arial,Helvetica,sans-serif;cursor:pointer}}
/* barre du bas : bleu un peu plus fonce pour "Appeler" (blanc sur #2977dc = 4,4:1, sous le seuil de 4,5) */
@media (max-width:768px){.contact-buttons .btn-call{background:#1f63bd!important}.contact-buttons .btn-call:hover{background:#1a55a3!important}}
/* bouton plein ecran : pastille icone + texte (tres utilise d'apres Hotjar ; une icone seule ne dit pas ce qu'elle fait).
   Petit telephone (<= 480 px) : "Agrandir" et badge "Similaires" (textes courts) pour que compteur, badge et pastille tiennent sur une ligne */
#general.fp2 .lb-open-btn{width:auto;height:32px;padding:0 12px 0 10px;border-radius:16px;gap:6px;background:rgba(255,255,255,.94);color:#1f2a37;font:bold 13px Arial,Helvetica,sans-serif;white-space:nowrap;transition:color .15s}
#general.fp2 .lb-open-btn svg{width:16px;height:16px;stroke:currentColor}
#general.fp2 .lb-open-btn:after{content:"Plein \E9 cran"}
@media (hover:hover){#general.fp2 .lb-open-btn:hover{color:#1f63bd}#general.fp2 .lb-open-btn:hover svg{stroke:currentColor}}
@media (max-width:480px){
 #general.fp2 .lb-open-btn:after{content:"Agrandir"}
 #general.fp2 .fiche-sim-btn{font-size:0;gap:5px}
 #general.fp2 .fiche-sim-btn:after{content:"Similaires";font-size:12px}
}
@media (max-width:400px){#general.fp2 .lb-open-btn{padding:0 9px 0 8px;gap:4px;font-size:12px}#general.fp2 .fiche-sim-btn{padding:5px 10px}} /* 360 px : la pastille touchait le badge Similaires */
/* liens "Partager" et "Sauvegarder" sous le titre (sur la ligne de la date, a droite) - 19/10/2026, maquette validee */
#general.fp2 .f2-act-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin:0 0 8px}
#general.fp2 .f2-act-row .fiche-date{margin:0!important}
#general.fp2 .f2-act{display:flex;gap:4px;margin-left:auto}
#general.fp2 .f2-act button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:0;border-radius:17px;background:none;color:#1f2a37;font:bold 14px Arial,Helvetica,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:background-color .15s}
#general.fp2 .f2-act button:hover{background:#f3f5f8}
#general.fp2 .f2-act button:focus-visible{outline:2px solid #1f63bd;outline-offset:2px}
#general.fp2 .f2-act svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#general.fp2 .f2-act .f2-save.on svg{fill:#e00;stroke:#e00}
@media (max-width:480px){#general.fp2 .f2-act button{padding:0 6px;font-size:13.5px}}