/*
 * Zone photos du depot gratuit (21/10/2026, maquette validee) - js/depot-photos.js + Dropzone 5.9.3.
 * Charte : bleu #2977dc, cartes #e2e2e2, coins 6-8 px, texte secondaire #5b6472, erreurs #c0392b.
 * Telephone : 4 photos par ligne, repli au-dela de 8 ; tablette 5 ; ordinateur 6.
 */
.dp { margin: 0 0 20px; font-family: Arial, Helvetica, sans-serif; }
.dp-tete { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #e2e2e2; }
.dp-icone { width: 32px; height: 32px; border-radius: 50%; background: #2977dc; display: flex; align-items: center; justify-content: center; flex: none; }
.dp-icone svg { width: 16px; height: 16px; }
.dp-titre { margin: 0 !important; padding: 0 !important; font-size: 18px !important; color: #1f2a37 !important; font-weight: bold !important; background: none !important; border: 0 !important; text-transform: none !important; }
.dp-compte { margin-left: auto; font-size: 13px; color: #5b6472; }
.dp-texte { margin: 0 0 12px; font-size: 14px; color: #555; line-height: 1.45; }

/* zone de depot : ordinateur = cadre "Glissez vos photos ici ou [Choisir]" ; telephone = grand bouton */
.dp-depot { border: 2px dashed #9fb4d1; background: #f5f8fd; border-radius: 8px; padding: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
.dp-depot-pc { font-size: 15px; color: #1f2a37; }
.dp-choisir { height: 46px; padding: 0 18px; border-radius: 6px; border: 0; background: #2977dc; color: #fff; font: bold 15px Arial, Helvetica, sans-serif; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.dp-choisir:hover { background: #1f63bd; }
.dp-choisir:focus-visible, .dp-ajout:focus-visible, .dp-plus:focus-visible, .dp-suppr:focus-visible { outline: 2px solid #1f63bd; outline-offset: 2px; }
.dp-choisir svg { width: 18px; height: 18px; }
.dp.dz-drag-hover .dp-depot { border-color: #2977dc; background: #e8f0fc; }
/* des qu'il y a une photo : cadre plus fin (ordinateur), plus de grand bouton (telephone) */
.dp.dp-avec .dp-depot { padding: 10px; }

/* grille */
.dp-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.dp-grille:empty, .dp:not(.dp-avec) .dp-grille { display: none; }
.dp-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #d7dee7; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dp-photo img { display: block; width: 100%; height: 100%; object-fit: contain; background: #e4e6ea; pointer-events: none; } /* photo entiere, bandes grises si elle est haute (gerant 21/10/2026) */
.dp-photo:first-child { outline: 3px solid #2977dc; outline-offset: -3px; }
.dp-principale { display: none; position: absolute; left: 5px; top: 5px; background: #2977dc; color: #fff; font-size: 11px; font-weight: bold; padding: 2px 7px; border-radius: 10px; }
.dp-photo:first-child .dp-principale { display: block; }
/* 21/10/2026 (gerant) : croix en haut a droite (rond fonce garde : les photos de voitures sont souvent claires) */
.dp-suppr { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: rgba(15, 23, 42, .65); color: #fff; font-size: 17px; line-height: 28px; cursor: pointer; }
.dp-suppr:hover { background: #c0392b; }
/* etats d'envoi (classes posees par Dropzone) */
.dp-attente, .dp-barre { display: none; }
.dp-photo:not(.dz-processing):not(.dz-success):not(.dz-error):not(.dp-deja) .dp-attente { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; text-align: center; font-size: 11px; color: #1f2a37; background: rgba(255, 255, 255, .85); }
.dp-photo.dz-processing:not(.dz-complete) .dp-barre { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 5px; background: rgba(255, 255, 255, .88); }
.dp-barre span { display: block; height: 4px; background: #2977dc; border-radius: 2px; width: 0; transition: width .2s; }
.dp-photo:not(.dz-success):not(.dp-deja) img { opacity: .6; }
.dp-erreur { display: none; }
.dp-photo.dz-error { background: #fdf1f0; outline: 1.5px solid #c0392b; outline-offset: -1.5px; }
.dp-photo.dz-error img { opacity: .25; }
.dp-photo.dz-error .dp-erreur { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 30px 4px 4px; text-align: center; font-size: 11px; line-height: 1.25; color: #c0392b; font-weight: bold; }
/* case "+ Ajouter" (toujours en dernier) */
.dp-ajout { aspect-ratio: 4 / 3; border-radius: 6px; border: 1.5px dashed #9fb4d1; background: #f5f8fd; color: #2977dc; font: bold 13px Arial, Helvetica, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 0; }
.dp-ajout b { font-size: 22px; line-height: 1; }
.dp-ajout:hover { background: #e8f0fc; }
.dp.dp-plein .dp-ajout, .dp.dp-plein .dp-depot { display: none; }
/* glisser-deposer */
.dp-photo.dp-souleve { opacity: .35; }
.dp-fantome { position: fixed; z-index: 2147483000; pointer-events: none; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 22px rgba(15, 23, 42, .30); transform: rotate(-3deg) scale(1.05); }
.dp-fantome img { display: block; width: 100%; height: 100%; object-fit: contain; background: #e4e6ea; }

.dp-plus { display: none; width: 100%; height: 44px; margin-top: 10px; border-radius: 6px; border: 1px solid #e2e2e2; background: #fff; color: #2977dc; font: bold 14px Arial, Helvetica, sans-serif; cursor: pointer; }
.dp-etat { margin: 10px 0 0; font-size: 13px; color: #5b6472; min-height: 0; }
.dp-etat:empty { display: none; }
.dp-aide { margin: 8px 0 0; font-size: 13px; color: #5b6472; line-height: 1.45; }
.dp-aide b { color: #1f2a37; }
.dp-max { margin: 10px 0 0; border-radius: 6px; background: #fff8e1; border: 1px solid #f5d77a; padding: 10px 12px; font-size: 13px; color: #1f2a37; line-height: 1.45; }

/* tablette */
@media (max-width: 980px) {
	.dp-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
}
/* telephone (21/10/2026, idee du gerant, comme Vinted) : grand bouton avant la 1re photo, puis UNE ligne qu'on fait
   defiler au doigt (meme hauteur de 1 a 20 photos), case "+" en premier, vignettes en largeur de 140 px */
@media (max-width: 700px) {
	.dp-depot { border: 0; background: none; padding: 0; }
	.dp-depot-pc { display: none; }
	.dp-choisir { width: 100%; height: 52px; justify-content: center; font-size: 16px; }
	.dp.dp-avec .dp-depot { display: none; }
	.dp-grille { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 2px 0 6px; scrollbar-width: none; }
	.dp-grille::-webkit-scrollbar { display: none; }
	.dp-photo, .dp-ajout { flex: 0 0 140px; width: 140px; scroll-snap-align: start; }
	.dp-ajout { order: -1; }
	.dp-grille.dp-en-tri { scroll-snap-type: none; } /* glisser en cours : le calage annulait le defilement automatique */
	.dp-photo:first-child { outline-width: 3px; }
}

/* 21/10/2026 : bouton "tourner" (bas a droite, meme style que la croix), conseil selon le nombre de photos */
.dp-tourner { display: none; position: absolute; right: 4px; bottom: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: rgba(15, 23, 42, .65); color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.dp-tourner svg { width: 16px; height: 16px; }
.dp-tourner:hover { background: #1f63bd; }
.dp-tourner:focus-visible { outline: 2px solid #1f63bd; outline-offset: 2px; }
.dp-photo.dz-success .dp-tourner, .dp-photo.dp-deja .dp-tourner { display: flex; }
.dp-photo.dz-error .dp-tourner { display: none; }
.dp-photo img { transition: transform .2s; }
.dp-photo.dp-tourne .dp-tourner { opacity: .6; }
.dp-conseil { margin: 10px 0 0; font-size: 13px; color: #1a7a3e; line-height: 1.45; padding-left: 22px; background: no-repeat 0 0 / 17px 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); } /* ampoule verte = conseil (gerant 21/10/2026) */
.dp-conseil:empty { display: none; }

/* 21/10/2026 : page dediee a la zone (ajout de photos ; plus tard etape photos des pros) - meme carte que le depot gratuit */
.dp-fond { background: #e6ecf6; }
.dp-page { max-width: 980px; margin: 0 auto; padding: 16px 10px 28px; box-sizing: border-box; }
.dp-carte { display: block; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); padding: 26px 30px; margin: 0; }
.dp-carte .dp { margin-bottom: 0; }
.dp-fin { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 22px 0 0; font-family: Arial, Helvetica, sans-serif; }
.dp-fin a { font-weight: bold; font-size: 14px; color: #2977dc; }
.dp-fin .dp-terminer { width: auto; padding: 0 28px; }
@media (max-width: 700px) {
	.dp-page { padding: 10px 4px 20px; }
	.dp-carte { padding: 16px 12px; }
	.dp-fin .dp-terminer { width: 100%; }
	.dp-fin { justify-content: center; }
}

/* 21/10/2026 (tests telephone) : x et tourner gardent 28 px a l'oeil mais se touchent sur 44 px (zone invisible autour) */
.dp-suppr::after, .dp-tourner::after { content: ""; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; }
/* nom de l'annonce en haut de la page Ajouter des photos */
.dp-annonce { margin: 0 0 14px; font: 15px/1.4 Arial, Helvetica, sans-serif; color: #1f2a37; }
.dp-annonce span { color: #5b6472; font-size: 13px; }

/* 21/10/2026 : appareil photo direct. Android n'ouvre que la galerie quand plusieurs photos sont permises : la classe dp-cam
   (posee par js/depot-photos.js, voir "camera") ajoute "Prendre une photo" (une a la fois) ; l'autre bouton devient "galerie". */
.dp-camera, .dp-ajout-cam, .dp-lib-galerie { display: none; }
.dp.dp-cam .dp-camera { display: inline-flex; }
.dp.dp-cam .dp-ajout-cam { display: flex; order: 1; }
.dp.dp-cam .dp-lib-galerie { display: inline; }
.dp.dp-cam .dp-lib-tout { display: none; }
.dp-camera { height: 46px; padding: 0 18px; border-radius: 6px; border: 0; background: #2977dc; color: #fff; font: bold 15px Arial, Helvetica, sans-serif; align-items: center; gap: 8px; cursor: pointer; }
.dp-camera:hover { background: #1f63bd; }
.dp-camera:focus-visible { outline: 2px solid #1f63bd; outline-offset: 2px; }
.dp-camera svg, .dp-ajout-cam svg { width: 18px; height: 18px; }
.dp-ajout-cam svg { width: 22px; height: 22px; }
.dp.dp-cam .dp-choisir { background: #fff; color: #2977dc; box-shadow: inset 0 0 0 1.5px #2977dc; }
.dp.dp-cam .dp-choisir:hover { background: #e8f0fc; }
.dp-ajout-cam { background: #2977dc; color: #fff; border-color: #2977dc; }
.dp-ajout-cam:hover { background: #1f63bd; }
.dp.dp-plein .dp-ajout-cam { display: none; }
@media (max-width: 700px) {
	.dp.dp-cam .dp-camera { width: 100%; height: 52px; justify-content: center; font-size: 16px; }
	.dp.dp-cam .dp-depot { flex-direction: column; gap: 10px; }
	.dp.dp-cam .dp-ajout-cam { order: -2; flex: 0 0 140px; width: 140px; scroll-snap-align: start; }
}

/* 21/10/2026 (gerant, maquette validee) : telephone Android, des la 1re photo, les cases "Photo" et "+ Galerie" cachaient la
   miniature -> elles sortent de la ligne ; deux boutons courts cote a cote au-dessus, la ligne ne contient que les photos. */
.dp-lib-court { display: none; }
@media (max-width: 700px) {
	.dp.dp-cam .dp-ajout, .dp.dp-cam .dp-ajout-cam { display: none; }
	.dp.dp-cam.dp-avec .dp-depot { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; padding: 0; margin-bottom: 10px; }
	.dp.dp-cam.dp-avec .dp-camera, .dp.dp-cam.dp-avec .dp-choisir { flex: 1 1 0; width: auto; min-width: 0; height: 44px; font-size: 15px; padding: 0 10px; }
	.dp.dp-cam.dp-avec .dp-lib-long { display: none; }
	.dp.dp-cam.dp-avec .dp-lib-court { display: inline; }
	.dp.dp-cam.dp-plein .dp-depot { display: none; }
}

/* 21/10/2026 (gerant) : Android, aide courte apres un retour sans photo (autorisation refusee possible), voir js "cancel" */
.dp-perm { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding: 7px 8px 7px 10px; border-radius: 6px; background: #eef4fd; border: 1px solid #c9dcf6; }
.dp-perm[hidden] { display: none !important; }
.dp-perm p { flex: 1; margin: 0; font-size: 13px; line-height: 1.4; color: #1f2a37; }
.dp-perm small { display: block; margin-top: 2px; font-size: 12px; color: #5b6472; }
.dp-perm-lien { display: inline-block; margin: -12px -6px; border: 0; background: none; padding: 12px 6px; font: bold 13px Arial, Helvetica, sans-serif; color: #1f63bd; text-decoration: underline; cursor: pointer; }
.dp-perm-x { flex: 0 0 auto; width: 40px; height: 40px; margin: -8px -8px -8px 0; border: 0; background: none; padding: 0; font-size: 20px; line-height: 1; color: #5b6472; cursor: pointer; }