/* ============================================================
   TUNNEL D'INSCRIPTION — publier.php (nouveau design 2026)
   Etapes : etablissement > compte > annonce > paiement.
   S'appuie sur les variables et composants de nouveau.css.
   ============================================================ */

body#publier {
	background: var(--fond);
}
#publier .page-content {
	padding-bottom: 56px;
}
#publier h1 {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: var(--ink);
	margin: 10px 0 0;
}

/* ---------- Barre de progression ---------- */
#publier .progression { display: flex; margin: 26px 0 30px; }
#publier .progression .pas {
	flex: 1; text-align: center; position: relative;
	font-size: 13.5px; font-weight: 600; color: var(--gris);
}
#publier .progression .pas .rond {
	width: 34px; height: 34px; border-radius: 50%; background: var(--blanc); border: 2px solid #d9e2e1;
	display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
	font-weight: 800; font-size: 14px; position: relative; z-index: 2;
}
#publier .progression .pas::before {
	content: ''; position: absolute; top: 17px; left: -50%; right: 50%; height: 2px; background: #d9e2e1;
}
#publier .progression .pas:first-child::before { display: none; }
#publier .progression .pas.actif { color: var(--teal-dark); }
#publier .progression .pas.actif .rond { background: var(--teal); border-color: var(--teal); color: #fff; }
#publier .progression .pas.fait .rond { background: var(--teal-light); border-color: var(--teal); color: var(--teal-dark); }
#publier .progression .pas.fait::before, #publier .progression .pas.actif::before { background: var(--teal); }

/* ---------- Disposition : formulaire + panneau recap ---------- */
#publier .insc-disposition {
	display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; margin-top: 10px;
}

/* ---------- Carte formulaire ---------- */
#publier .form-carte {
	background: var(--blanc); border-radius: calc(var(--radius) + 4px);
	box-shadow: var(--ombre); padding: 34px 36px;
}
#publier .form-carte h2 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 6px; }
#publier .form-carte .sous { color: var(--gris); font-size: 14.5px; margin: 0 0 24px; }
#publier .rang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

#publier .champ { margin-bottom: 16px; }
#publier .champ label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
#publier .champ input[type="text"],
#publier .champ input[type="email"],
#publier .champ input[type="password"],
#publier .champ select,
#publier .champ textarea {
	width: 100%; padding: 11px 14px; border: 1.5px solid #d9e2e1; border-radius: 10px;
	font-family: inherit; font-size: 15px; outline: none; background: var(--blanc); color: var(--ink);
	box-shadow: none;
}
#publier .champ input:focus, #publier .champ select:focus, #publier .champ textarea:focus { border-color: var(--teal); }
#publier .champ .aide { font-size: 12.5px; color: var(--gris); margin-top: 4px; }
#publier .champ .optionnel { color: var(--gris); font-weight: 500; }

/* Erreurs de validation */
#publier .champ.en-erreur input, #publier .champ.en-erreur select { border-color: #c0392b; }
#publier .champ .erreur { color: #c0392b; font-size: 13px; font-weight: 600; margin-top: 4px; }
#publier .alerte-erreur {
	background: #fdecea; color: #c0392b; border-radius: var(--radius);
	padding: 14px 18px; font-size: 14.5px; margin-bottom: 20px;
}

/* Cartes radio (type d'hebergement) */
#publier .radio-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#publier .radio-carte {
	border: 2px solid #d9e2e1; border-radius: var(--radius); padding: 18px 20px; cursor: pointer;
	display: flex; gap: 14px; align-items: center; transition: all .15s; background: var(--blanc);
	margin: 0; font-weight: normal;
}
#publier .radio-carte input { accent-color: var(--teal); width: 18px; height: 18px; flex: none; margin: 0; }
#publier .radio-carte .picto { font-size: 24px; flex: none; }
#publier .radio-carte .titre { font-weight: 700; font-size: 15px; }
#publier .radio-carte .detail { font-size: 12.5px; color: var(--gris); }
#publier .radio-carte.actif { border-color: var(--teal); background: var(--teal-light); }

/* Bloc "deja membre" */
#publier .deja-membre {
	background: var(--teal-light); border-radius: var(--radius);
	padding: 14px 20px; font-size: 14.5px; margin-bottom: 24px;
}
#publier .deja-membre a { font-weight: 700; }

/* Navigation bas de formulaire */
#publier .form-navigation {
	display: flex; justify-content: space-between; align-items: center; gap: 14px;
	margin-top: 30px; flex-wrap: wrap;
}
#publier .form-navigation .bouton { padding: 13px 30px; font-size: 15.5px; }

/* ---------- Panneau recapitulatif sticky ---------- */
#publier .panneau-recap {
	position: sticky; top: 96px; background: var(--blanc); border-radius: calc(var(--radius) + 4px);
	box-shadow: var(--ombre-hover); padding: 28px; font-size: 14.5px;
}
#publier .panneau-recap h3 { font-size: 17px; font-weight: 700; margin: 0 0 16px; }
#publier .panneau-recap ul { list-style: none; margin: 0 0 14px; padding: 0; }
#publier .panneau-recap li {
	padding-left: 26px; position: relative; margin-bottom: 9px;
	font-size: 13.5px; color: var(--gris); list-style: none;
}
#publier .panneau-recap li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
#publier .panneau-recap .ligne-prix {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 12px 0 0; border-top: 1px solid var(--gris-clair);
}
#publier .panneau-recap .total { font-size: 24px; font-weight: 800; color: var(--ink); }
#publier .panneau-recap .periode { color: var(--gris); font-size: 13px; }
#publier .panneau-recap .reassurance {
	font-size: 12.5px; color: var(--gris); text-align: center;
	margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--gris-clair);
}
#publier .panneau-recap .reassurance b { color: var(--teal-dark); }

/* ---------- Etape 3 : annonce integree (description + photos) ---------- */
#publier .alerte-succes {
	background: var(--teal-light); color: var(--teal-dark); border-radius: var(--radius);
	padding: 14px 18px; font-size: 14.5px; font-weight: 600; margin-bottom: 20px;
}
#publier .rang-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

#publier .photos-grille {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px; margin-bottom: 10px;
}
#publier .photos-grille:empty { display: none; }
#publier .photo-vignette { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
#publier .photo-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
#publier .photo-suppr {
	position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
	border: none; background: rgba(20, 30, 29, .72); color: #fff; font-size: 16px; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
#publier .photo-suppr:hover { background: #c0392b; }

#publier .zone-photos {
	border: 2px dashed #c6d4d2; border-radius: var(--radius); padding: 26px 20px; text-align: center;
	color: var(--gris); font-size: 13.5px; cursor: pointer; transition: border-color .15s, background .15s, opacity .15s;
	background: var(--fond); line-height: 1.6;
}
#publier .zone-photos:hover, #publier .zone-photos.survol { border-color: var(--teal); background: var(--teal-light); }
#publier .zone-photos.chargement { opacity: .45; pointer-events: none; }
#publier .zone-photos .picto { font-size: 26px; display: block; margin-bottom: 6px; }
#publier .zone-photos b { color: var(--teal-dark); }

/* ---------- Etape 3 : checklist de l'annonce ---------- */
#publier .checklist { display: grid; gap: 12px; margin: 4px 0 8px; }
#publier .check-item {
	display: flex; align-items: center; gap: 16px;
	border: 1.5px solid var(--gris-clair); border-radius: var(--radius);
	padding: 16px 18px; background: var(--fond);
}
#publier .check-item .statut {
	width: 34px; height: 34px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 15px;
	background: var(--blanc); border: 2px solid #d9e2e1; color: var(--gris);
}
#publier .check-item.fait { border-color: var(--teal); background: var(--teal-light); }
#publier .check-item.fait .statut { background: var(--teal); border-color: var(--teal); color: #fff; }
#publier .check-item .corps { flex: 1; min-width: 0; }
#publier .check-item .corps b { display: block; font-size: 15px; }
#publier .check-item .detail { font-size: 13px; color: var(--gris); }
#publier .check-item .bouton { flex: none; padding: 9px 20px; font-size: 14px; }
#publier .check-item .optionnel { font-weight: 500; color: var(--gris); font-size: 13px; }
#publier .aide-publication { font-size: 13.5px; color: var(--gris); font-weight: 600; max-width: 320px; text-align: right; }

/* Recap etape 4 */
#publier .recap-publication { background: var(--fond); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 22px; }
#publier .recap-publication .ligne { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14.5px; }
#publier .recap-publication .ligne span:first-child { color: var(--gris); flex: none; }
#publier .recap-publication .ligne b { text-align: right; }

/* ---------- Etape 3 : confirmation compte / redaction ---------- */
#publier .confirmation-compte {
	text-align: center; padding: 20px 0 6px;
}
#publier .confirmation-compte .coche {
	width: 64px; height: 64px; border-radius: 50%; background: var(--teal-light);
	display: flex; align-items: center; justify-content: center;
	font-size: 30px; color: var(--teal-dark); margin: 0 auto 18px; font-weight: 800;
}
#publier .confirmation-compte h2 { margin-bottom: 10px; }
#publier .confirmation-compte p { color: var(--gris); font-size: 15px; max-width: 480px; margin: 0 auto 8px; }
#publier .confirmation-compte .bouton { margin-top: 22px; padding: 14px 34px; font-size: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	#publier .insc-disposition { grid-template-columns: 1fr; }
	#publier .panneau-recap { position: static; }
	#publier .form-carte { padding: 26px 22px; }
}
@media (max-width: 560px) {
	#publier .radio-cartes, #publier .rang, #publier .rang-3 { grid-template-columns: 1fr; }
	#publier .progression .pas { font-size: 11.5px; }
	#publier .form-navigation .bouton { width: 100%; }
}