/*
 * Formulaire d'annonce unique (21/10/2026) : annoncegratuite/_formulaire-annonce.php + js/annonce-formulaire.js.
 * Classes af- seulement. Valeurs de la charte et du depot gratuit : carte blanche sur fond #e6ecf6, sections a rond bleu,
 * champs de 44 px, erreurs sous le champ (form-erreurs.css), boutons d'un toucher en pastilles (#c9ced6 / bleu choisi),
 * tuiles des categories = silhouettes de la recherche detaillee (variable --rs-cat-img de recherche-avancee.css).
 * Telephone <= 730 px, tablette 731-980, ordinateur >= 981. Fichier en ASCII.
 */
.af-fond{background:#e6ecf6}
.af-page{max-width:980px;margin:0 auto;padding:10px 4px 24px;box-sizing:border-box;font:14px/1.45 Arial,Helvetica,sans-serif;color:#222}
.af-carte{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.10);padding:16px 12px 20px}
.af-page *,.af-page *::before,.af-page *::after{box-sizing:border-box}
.af-retour{display:inline-block;padding:6px 0;font-weight:bold;color:#2977dc;text-decoration:none}
.af-retour:hover{text-decoration:underline;color:#1f63bd}
/* float / width : regle ancienne du site sur les h1 / h2 */
.af-h1{float:none;width:auto;margin:6px 0 0;padding:0;font:bold 21px/1.25 Arial,Helvetica,sans-serif;color:#1f2a37;background:none;text-transform:none}
.af-rappel{display:flex;gap:10px;align-items:center;background:#f5f8fd;border-radius:8px;padding:8px;margin-top:12px;font-size:14px}
.af-rappel img{width:72px;height:54px;object-fit:cover;border-radius:5px;flex:none;background:#e4e6ea}
.af-rappel b{color:#1f2a37}
.af-rappel span{display:block;color:#5b6472;font-size:13px}
.af-info{font-size:13.5px;color:#1f2a37;background:#e6f6ec;border:1px solid #9fd8b2;border-radius:6px;padding:9px 12px;margin-top:12px;line-height:1.4}
.af-erreur-serveur{font-size:14px;background:#fdecea;border:1px solid #f1a9a0;border-radius:6px;padding:10px 12px;margin-top:12px}

.af{margin:0;padding:0}
.af-sec{display:flex;align-items:center;gap:10px;margin:22px 0 4px;padding-bottom:10px;border-bottom:1px solid #e2e2e2}
.af-sec h2{float:none;width:auto;margin:0;padding:0;font:bold 18px/1.3 Arial,Helvetica,sans-serif;color:#1f2a37;background:none;text-transform:none}
.af-rond{width:32px;height:32px;border-radius:50%;background:#2977dc;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.af-rond [data-lucide],.af-rond svg{width:16px;height:16px}
.af-rond-clair{background:#eaf2fd;color:#2977dc}
.af-champ{margin-top:12px;min-width:0}
.af-lab{display:block;margin:0 0 6px;font-size:14px;font-weight:bold;color:#1f2a37}
.af-lab b{color:#d63a25}
.af-lab span{font-weight:normal;color:#5b6472}
.af input[type=text],.af textarea,.af select.af-natif{display:block;float:none;margin:0;width:100%;height:44px;border:1px solid #ccc;border-radius:6px;padding:0 12px;font:16px Arial,Helvetica,sans-serif;color:#222;background:#fff}
.af textarea{height:auto;min-height:130px;padding:10px 12px;line-height:1.45;resize:vertical}
.af input::placeholder,.af textarea::placeholder{color:#8a929e}
.af input[type=text]:focus,.af textarea:focus,.af select.af-natif:focus{border-color:#2977dc;outline:2px solid #cfe0f8;outline-offset:0}
.af select.af-natif{-webkit-appearance:none;appearance:none;padding-right:32px;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%23333%27 stroke-width=%271.6%27 fill=%27none%27/%3E%3C/svg%3E") no-repeat right 12px center}
.af select.af-natif.af-vide{color:#555}
/* listes avec recherche (js/ac-combo.js) : meme hauteur que les autres champs */
.af .acc-btn{height:44px;border-radius:6px;font-size:16px;padding-left:12px}
.af .fe-ko .acc-btn{border-color:#c0392b;background-color:#fef8f8}
.af-unite{position:relative}
.af-unite input[type=text]{padding-right:44px}
.af-unite span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#5b6472;font-size:15px;pointer-events:none}
.af-aide{margin-top:5px;font-size:13px;color:#5b6472;line-height:1.4}
.af-g2,.af-g3{display:grid;grid-template-columns:minmax(0,1fr);gap:0 10px}
.af-g3 .af-g2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* boutons d'un toucher (boite, portes, equipements) */
.af-pills{display:flex;flex-wrap:wrap;gap:8px}
.af-pill{position:relative;display:inline-flex;margin:0;cursor:pointer}
.af-pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.af-pill span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid #c9ced6;border-radius:20px;background:#fff;font-size:14px;color:#222;transition:background-color .15s,border-color .15s}
.af-pill-court span{min-width:44px;padding:0 6px;justify-content:center}
.af-pill:hover span{border-color:#2977dc}
.af-pill input:checked + span{background:#2977dc;border-color:#2977dc;color:#fff;font-weight:bold}
.af-pills-equip .af-pill input:checked + span::before{content:"\2713"}
.af-pill input:focus-visible + span{outline:2px solid #1f63bd;outline-offset:2px}
.af .fe-ko .af-pill span{border-color:#c0392b}

/* tuiles des categories */
.af-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.af-tuile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;margin:0;padding:6px 4px;border:1px solid #d5d9e0;border-radius:8px;background:#fff;font-size:13px;color:#1f2a37;text-align:center;line-height:1.2;cursor:pointer;transition:border-color .15s,background-color .15s}
.af-tuile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.af-tuile i{display:block;width:54px;height:25px;background:#5b6472;-webkit-mask:var(--rs-cat-img) no-repeat;mask:var(--rs-cat-img) no-repeat;-webkit-mask-size:900% 100%;mask-size:900% 100%}
.af-tuile:hover{border-color:#2977dc}
.af-tuile:hover i{background:#2977dc}
.af-tuile:has(input:checked){border-color:#2977dc;background:#eaf2fd;color:#1f63bd;font-weight:bold}
.af-tuile:has(input:checked) i{background:#1f63bd}
.af-tuile:has(input:focus-visible){outline:2px solid #1f63bd;outline-offset:2px}
.af .fe-ko .af-tuile{border-color:#c0392b}
.af-c1 i{-webkit-mask-position:0 0;mask-position:0 0}
.af-c7 i{-webkit-mask-position:12.5% 0;mask-position:12.5% 0}
.af-c2 i{-webkit-mask-position:25% 0;mask-position:25% 0}
.af-c4 i{-webkit-mask-position:37.5% 0;mask-position:37.5% 0}
.af-c9 i{-webkit-mask-position:50% 0;mask-position:50% 0}
.af-c8 i{-webkit-mask-position:62.5% 0;mask-position:62.5% 0}
.af-c10 i{-webkit-mask-position:75% 0;mask-position:75% 0}
.af-c11 i{-webkit-mask-position:87.5% 0;mask-position:87.5% 0}
.af-c5 i{-webkit-mask-position:100% 0;mask-position:100% 0}

/* equipements replies */
.af-equip{margin-top:20px;border:1px dashed #c9ced6;border-radius:8px;padding:0 12px}
.af-equip[open]{border-style:solid;padding-bottom:14px}
.af-equip summary{display:flex;align-items:center;gap:10px;min-height:56px;cursor:pointer;list-style:none;font-size:14px;color:#1f2a37}
.af-equip summary::-webkit-details-marker{display:none}
.af-equip summary:focus-visible{outline:2px solid #1f63bd;outline-offset:2px;border-radius:6px}
.af-equip-t{flex:1}
.af-equip-t span{color:#5b6472}
.af-equip-nb{color:#1f63bd!important;font-weight:bold}
.af-fl{color:#2977dc;transition:transform .15s;flex:none}
.af-equip[open] .af-fl{transform:rotate(180deg)}
.af-grp{margin:14px 0 8px;font-size:12.5px;font-weight:bold;letter-spacing:.06em;text-transform:uppercase;color:#5b6472}

.af-photos{margin-top:22px}

/* pied : resume des erreurs + boutons */
.af-pied{margin-top:22px;border-top:1px solid #e2e2e2;padding-top:16px}
.af-resume{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;background:#fdecea;border:1px solid #f1a9a0;border-radius:6px;padding:8px 12px;font-size:14px;color:#1f2a37}
.af-resume[hidden]{display:none}
.af-voir{background:none;border:0;padding:6px 0;color:#c0392b;font-weight:bold;text-decoration:underline;cursor:pointer;font-size:14px}
.af-boutons{display:flex;align-items:center;gap:16px}
.af-annuler{color:#5b6472;font-size:14px;padding:12px 4px}
.af-annuler:hover{color:#1f2a37}
.af-envoi{flex:1;min-height:50px;border:0;border-radius:6px;background:#2977dc;color:#fff;font:bold 16px Arial,Helvetica,sans-serif;cursor:pointer;transition:background-color .15s,transform .15s,box-shadow .15s}
.af-envoi:hover{background:#1f63bd;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.af-envoi:focus-visible{outline:2px solid #1f63bd;outline-offset:2px}
.af-envoi[disabled]{opacity:.7;cursor:wait;transform:none}
.af-envoi-jaune{background:#ffc702;color:#222}
.af-envoi-jaune:hover{background:#f5b800}

/* telephone : boutons fixes en bas (a portee de pouce) */
@media (max-width:730px){
	.af-pied{position:sticky;bottom:0;z-index:50;margin:22px -12px -20px;padding:12px;background:#fff;border-top:0;box-shadow:0 -2px 10px rgba(0,0,0,.12);border-radius:0 0 8px 8px}
}
/* tablette et plus */
@media (min-width:731px){
	.af-page{padding:16px 10px 28px}
	.af-carte{padding:24px 26px 26px}
	.af-h1{font-size:22px}
	.af-g2,.af-g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
	.af-tuiles{grid-template-columns:repeat(5,minmax(0,1fr))}
	.af-envoi{flex:0 0 auto;padding:0 34px}
	.af-boutons{flex-direction:row-reverse;justify-content:flex-end}
}
@media (min-width:981px){
	.af-carte{padding:26px 30px 30px}
	.af-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
	.af-tuiles{grid-template-columns:repeat(9,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.af *{transition:none!important;transform:none!important}}
/* depot gratuit des particuliers (21/10/2026) : case "offres de prix" sous le prix ; champs integres dans le formulaire de la page */
.af-offre{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:#1f2a37;cursor:pointer;font-weight:normal}
.af-offre input{width:18px;height:18px;margin:0;float:none}
.af-integre .af-sec:first-child{margin-top:8px}
.af-integre{margin-bottom:22px} /* meme ecart qu entre les sections du formulaire, avant le bloc suivant de la page (zone photos) */
/* integre dans une page qui a ses propres regles (depot gratuit : ".ag-form label {display:block; font-weight:bold...}",
   "#gd-content h2 {font-size:30px; color:#999}") : l'id #af l'emporte */
#af .af-sec h2{font:bold 18px/1.3 Arial,Helvetica,sans-serif;color:#1f2a37;margin:0;padding:0;width:auto;float:none}
#af .af-lab{display:block;margin:0 0 6px;font-size:14px;font-weight:bold;color:#1f2a37}
#af .af-pill{display:inline-flex;width:auto;margin:0;font-weight:normal;font-size:14px;color:#222}
#af .af-tuile{display:flex;width:auto;margin:0;font-weight:normal;font-size:13px;color:#1f2a37}
#af .af-tuile:has(input:checked){font-weight:bold;color:#1f63bd}
#af .af-offre{display:flex;width:auto;margin:10px 0 0;font-weight:normal;font-size:14px}
#af .af-pill input,#af .af-tuile input{display:inline;position:absolute}