/* DIFONCE — styles du prototype (mobile d’abord).
   Jetons repris du design system LOT 02 : bleu nuit, bleu profond, orange DIFONCE, ivoire, blanc. */
:root {
  --nuit: #102B3B; --profond: #17394B; --orange: #F47735; --orange-fonce: #C9521A; --orange-pale: #FFF0E7;
  --ivoire: #F7F6F2; --blanc: #FFFFFF; --encre: #172B37; --gris: #5E6C73; --trait: #E3E5E0; --trait-fort: #C9CFCC;
  --vert: #1E7A54; --vert-pale: #E6F4EC; --rouge: #B3402F; --rouge-pale: #FBECE8; --wa: #157A4F;
  --rayon: 14px; --rayon-s: 10px; --ombre: 0 8px 24px rgba(16, 43, 59, .07);
  --titre: 'Montserrat', 'Segoe UI', Arial, sans-serif; --texte: 'DM Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  --large: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texte); font-size: 16px; line-height: 1.5; color: var(--encre); background: var(--ivoire); padding-bottom: 72px; overflow-wrap: anywhere; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--titre); color: var(--nuit); line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 8px; top: -60px; background: var(--nuit); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.evitement:focus { top: 8px; }
.ic { flex: none; }
.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.petit { font-size: 13.5px; color: var(--gris); }
[hidden] { display: none !important; }

/* ---------- Bandeau prototype ---------- */
.bandeau { background: var(--orange-pale); color: #7A3D17; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 500; }
.bandeau p { flex: 1; }
.bandeau .point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 8px; }
.bandeau a { font-weight: 700; }

/* ---------- En-tête ---------- */
.entete { background: var(--blanc); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 30; }
.entete-int { max-width: var(--large); margin: 0 auto; padding: 8px 12px 8px 16px; display: flex; align-items: center; gap: 10px; min-height: 60px; }
.logo { display: block; flex: none; }
.logo img { height: 34px; width: auto; mix-blend-mode: multiply; }
.recherche-entete, .nav-principale, .entete .cta-entete { display: none; }
.entete-actions-droite { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.btn-icone { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 12px; color: var(--nuit); position: relative; text-decoration: none; flex: none; }
.btn-icone:hover { background: #EEF1EF; }
.btn-icone.danger { color: var(--rouge); }
.btn-icone.desactive { color: #9AA5A8; cursor: help; }
.pastille { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange-fonce); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: 15px; text-decoration: none; text-align: center; transition: background .15s, border-color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-orange { background: var(--orange); color: #1B1108; }
.btn-orange:hover { background: #FF8A4C; }
.btn-clair { background: var(--blanc); color: var(--nuit); border-color: var(--trait-fort); }
.btn-clair:hover { border-color: var(--nuit); }
.btn-clair.actif { background: var(--orange-pale); border-color: var(--orange); }
.btn-clair.actif .ic { fill: var(--orange); stroke: var(--orange-fonce); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #0F6842; }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-grand { min-height: 52px; font-size: 16px; }
.btn-petit { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.bloc-large { width: 100%; }
.lien { display: inline-flex; align-items: center; gap: 2px; color: var(--orange-fonce); font-weight: 700; font-size: 14.5px; text-decoration: none; background: none; border: 0; padding: 8px 0; min-height: 40px; }
.lien:hover { text-decoration: underline; }
.lien .ic { width: 16px; height: 16px; }
.lien-discret { color: var(--gris); font-weight: 600; gap: 6px; margin-top: 10px; }
.rangee { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rangee.centre { justify-content: center; }

/* ---------- Mise en page ---------- */
main { display: block; max-width: var(--large); margin: 0 auto; padding: 16px 16px 40px; min-height: 60vh; }
.bloc { margin-top: 32px; }
.bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bloc-tete h2 { font-size: 20px; }
.panneau { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; }
.panneau > h2 { font-size: 18px; margin-bottom: 10px; }
.panneau h3 { font-size: 15px; margin: 18px 0 8px; }
.sur { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-fonce); margin-bottom: 6px; }
.sur-clair { color: #FFB48A; }
.entete-page { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 18px; }
.entete-page h1 { font-size: 26px; letter-spacing: -.02em; }
.chapo { color: var(--gris); margin-top: 6px; max-width: 62ch; }
.retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--gris); font-weight: 600; text-decoration: none; font-size: 14.5px; }
.retour:hover { color: var(--nuit); }
.note-fictif { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--gris); margin-top: 12px; }
.note-fictif .ic { width: 16px; height: 16px; margin-top: 2px; }
.alerte { display: flex; gap: 10px; background: var(--orange-pale); border: 1px solid #F6D3BD; color: #6B3716; border-radius: var(--rayon-s); padding: 12px 14px; font-size: 14.5px; margin: 12px 0; }
.alerte .ic { margin-top: 1px; color: var(--orange-fonce); }
.alerte-forte { border-color: var(--orange); }
.vide-court { color: var(--gris); padding: 12px 0; }

/* ---------- Accueil ---------- */
.hero { position: relative; border-radius: 18px; overflow: hidden; background: var(--nuit); color: #fff; display: flex; flex-direction: column; }
.hero picture { display: block; }
.hero-img { width: 100%; height: 200px; object-fit: cover; object-position: 72% 30%; }
.hero-texte { padding: 20px 18px 22px; position: relative; }
.hero h1 { color: #fff; font-size: 28px; letter-spacing: -.02em; }
.hero-chapo { color: #C9D6DB; margin: 10px 0 16px; max-width: 46ch; }
.recherche-hero, .barre-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fff; border-radius: 14px; padding: 6px; position: relative; }
.recherche-hero input[type=search], .barre-recherche input[type=search] { flex: 1 1 180px; width: auto; min-width: 0; border: 0; background: transparent; padding: 12px 8px 12px 40px; font-size: 16px; color: var(--encre); min-height: 46px; border-radius: 10px; }
.rh-icone { position: absolute; left: 16px; top: 19px; color: var(--gris); pointer-events: none; display: grid; }
.recherche-hero .btn, .barre-recherche .btn { flex: 1 1 100%; }
.barre-recherche { border: 1px solid var(--trait-fort); margin-bottom: 12px; }
.hero-liens { margin-top: 12px; font-size: 13.5px; color: #AFC1C8; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.lien-clair { background: none; border: 0; color: #fff; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; min-height: 36px; font-size: 13.5px; }
.grille-cat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cat { position: relative; border: 1px solid var(--trait); background: var(--blanc); border-radius: var(--rayon); padding: 0 0 10px; overflow: hidden; text-align: left; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.cat:hover { border-color: var(--orange); box-shadow: var(--ombre); }
.cat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; background: #E9E6E0; }
.cat-nom { font-family: var(--titre); font-weight: 700; color: var(--nuit); padding: 10px 12px 0; }
.cat-nb { font-size: 13px; color: var(--gris); padding: 0 12px; }
.bandeau-demande { margin-top: 32px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; display: grid; }
.bd-img { width: 100%; height: 180px; object-fit: cover; object-position: 20% 40%; }
.bd-texte { padding: 20px 18px; }
.bd-texte h2 { font-size: 22px; margin-bottom: 8px; }
.bd-texte p { color: var(--gris); margin-bottom: 16px; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: e; }
.etapes li { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px 16px 16px 60px; position: relative; display: grid; gap: 2px; }
.etapes li .ic { position: absolute; left: 14px; top: 16px; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--orange-pale); color: var(--orange-fonce); }
.etapes strong { font-family: var(--titre); color: var(--nuit); }
.etapes span { color: var(--gris); font-size: 14.5px; }
.bandeau-vendeur { margin-top: 32px; background: var(--profond); color: #fff; border-radius: 18px; padding: 22px 18px; display: grid; gap: 16px; }
.bandeau-vendeur h2 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.bandeau-vendeur p:not(.sur) { color: #C9D6DB; }

/* ---------- Cartes de pièces ---------- */
.grille-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.carte-piece { position: relative; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; display: flex; transition: box-shadow .15s, border-color .15s, transform .15s; }
.carte-piece:hover { box-shadow: var(--ombre); border-color: var(--trait-fort); transform: translateY(-2px); }
.carte-lien { text-decoration: none; display: flex; flex-direction: column; width: 100%; }
.carte-media { position: relative; aspect-ratio: 4 / 3; background: #ECE9E3; overflow: hidden; }
.carte-media img, .galerie-principale img, .vignette img { width: 100%; height: 100%; object-fit: cover; }
img.img-repli { object-fit: contain !important; padding: 10%; background: #F1F3F2; }
img.img-absente { visibility: hidden; }
.tag { position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 20px; background: #fff; color: var(--nuit); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.tag-neuf { background: var(--vert-pale); color: #14573B; }
.carte-corps { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.carte-sur { font-size: 12.5px; color: var(--gris); }
.carte-titre { font-size: 15px; font-family: var(--texte); font-weight: 700; line-height: 1.3; }
.prix { font-family: var(--titre); font-weight: 800; font-size: 17px; color: var(--nuit); margin: 2px 0; }
.carte-meta { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gris); }
.carte-meta .ic { width: 15px; height: 15px; }
.fav { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; color: var(--nuit); }
.fav::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 5px rgba(0, 0, 0, .16); }
.fav .ic { position: relative; }
.fav.actif .ic { fill: var(--orange); stroke: var(--orange-fonce); }
.apres-resultats { margin-top: 20px; padding: 16px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; color: var(--gris); }

/* ---------- États ---------- */
.etat-vide { text-align: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 28px 18px; }
.etat-vide h2 { font-size: 20px; margin: 10px 0 6px; }
.etat-vide p { color: var(--gris); max-width: 52ch; margin: 0 auto 16px; }
.etat-visuel { margin: 0 auto; width: 150px; height: auto; aspect-ratio: 232 / 200; object-fit: contain; }
.chargement .etat-visuel { width: 110px; aspect-ratio: 1; }
.chargement p { margin-bottom: 0; }
.etat-rond { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rouge-pale); color: var(--rouge); }
.etat-rond .ic { width: 30px; height: 30px; }
.confirmation { display: flex; gap: 14px; align-items: center; background: var(--vert-pale); border: 1px solid #BFE2CE; border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 14px; }
.confirmation img { width: 72px; height: auto; flex: none; }
.confirmation h2 { font-size: 17px; color: #14573B; margin-bottom: 4px; }
.confirmation p { font-size: 14.5px; color: #24543E; }

/* ---------- Recherche ---------- */
.recherche-outils { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tri { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); white-space: nowrap; min-width: 0; }
#btn-filtres { white-space: nowrap; flex: none; }
.tri select { min-height: 46px; }
.filtres { display: none; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px; margin-bottom: 14px; }
.filtres.ouvert { display: block; }
.filtres h2 { font-size: 17px; margin-bottom: 12px; }
.filtres .champ { margin-bottom: 14px; }
.filtres .facultatif, .filtres .erreur { display: none; }
.filtres-actifs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.filtres-actifs:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 8px 6px 14px; border-radius: 22px; border: 1px solid var(--nuit); background: var(--blanc); color: var(--nuit); font-size: 14px; font-weight: 600; }
.chip:hover { background: var(--orange-pale); border-color: var(--orange-fonce); }
.chip .ic { width: 16px; height: 16px; }
.compte { font-size: 14.5px; color: var(--gris); margin-bottom: 12px; font-weight: 600; }
.segments { display: flex; border: 1px solid var(--trait-fort); border-radius: 12px; overflow: hidden; background: var(--blanc); }
.segments label { flex: 1; position: relative; }
.segments input { position: absolute; opacity: 0; inset: 0; }
.segments span { display: grid; place-items: center; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--gris); cursor: pointer; }
.segments input:checked + span { background: var(--nuit); color: #fff; }
.segments input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: -3px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- Formulaires ---------- */
label, legend, .label { font-weight: 700; font-size: 14.5px; color: var(--nuit); }
.champ { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.champ legend { padding: 0; margin-bottom: 6px; }
input[type=text], input[type=search], input[type=number], input:not([type]), select, textarea { width: 100%; min-height: 48px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--blanc); padding: 10px 12px; font-size: 16px; }
textarea { resize: vertical; min-height: 96px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102B3B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 36px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 0; border-color: var(--orange-fonce); }
[aria-invalid=true] { border-color: var(--rouge) !important; background: #FFF9F7; }
.requis { color: var(--rouge); }
.facultatif { font-weight: 400; color: var(--gris); font-size: 13px; }
.aide { font-size: 13px; color: var(--gris); }
.erreur { font-size: 13.5px; color: var(--rouge); font-weight: 600; }
.erreur:empty { display: none; }
.formulaire fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.formulaire fieldset > legend { font-family: var(--titre); font-size: 17px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nuit); color: #fff; font-size: 14px; }
.grille-champs { display: grid; gap: 14px; }
.resume-erreurs { background: var(--rouge-pale); color: var(--rouge); border: 1px solid #EFC4BA; border-radius: var(--rayon-s); padding: 12px 14px; font-weight: 600; margin-bottom: 16px; }
.pied-form { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.pied-form .btn { flex: 1 1 160px; }
.zone-photo { border: 1px dashed var(--trait-fort); border-radius: var(--rayon-s); padding: 14px; background: #FBFBF9; display: grid; gap: 8px; justify-items: start; }
.photos-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-apercu { position: relative; width: 112px; height: 112px; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); }
.photo-apercu img { width: 100%; height: 100%; object-fit: cover; }
.photo-apercu .btn-icone { position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; background: rgba(255, 255, 255, .92); }

/* ---------- Fiche produit ---------- */
.fiche { display: grid; gap: 18px; }
.galerie-principale { position: relative; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; background: #ECE9E3; border: 1px solid var(--trait); }
.vignettes { display: flex; gap: 8px; margin-top: 8px; }
.vignette { width: 72px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #ECE9E3; }
.vignette.active { border-color: var(--orange); }
.galerie .petit { margin-top: 8px; }
.fiche-infos h1 { font-size: 24px; letter-spacing: -.01em; }
.fiche-prix { font-family: var(--titre); font-weight: 800; font-size: 30px; color: var(--nuit); margin: 10px 0 2px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.specs.colonne { grid-template-columns: 1fr; }
.specs dt { font-size: 12.5px; color: var(--gris); }
.specs dd { margin: 0; font-weight: 600; }
.compat { background: #EEF3F4; border-radius: var(--rayon-s); padding: 14px; margin-bottom: 16px; }
.compat h2 { font-size: 14.5px; display: flex; align-items: center; gap: 8px; font-family: var(--texte); }
.compat-v { font-family: var(--titre); font-weight: 700; font-size: 18px; color: var(--nuit); margin: 6px 0; }
.actions-fiche { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
.vendeur-encart, .carte-boutique, .choix-boutique { display: flex; align-items: center; gap: 12px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px; text-decoration: none; width: 100%; text-align: left; transition: border-color .15s, box-shadow .15s; }
.vendeur-encart { margin-top: 16px; }
.vendeur-encart:hover, .carte-boutique:hover, .choix-boutique:hover { border-color: var(--orange); box-shadow: var(--ombre); }
.cb-texte { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; color: var(--gris); }
.cb-texte strong { font-family: var(--titre); font-size: 15.5px; color: var(--nuit); }
.cb-nb { color: var(--vert); font-weight: 600; }
.cb-fleche { color: var(--gris); }
.rangee-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; color: var(--gris); }
.avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; display: block; background: #E3E8E6; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.avatar-l { width: 56px; height: 56px; }
.avatar-xl { width: 96px; height: 96px; border: 4px solid #fff; box-shadow: var(--ombre); }
.avatar-txt { display: grid; place-items: center; background: var(--profond); color: #fff; font-family: var(--titre); font-weight: 700; }
.avatar-xl.avatar-txt { font-size: 30px; }
.etoiles { display: inline-flex; gap: 1px; vertical-align: middle; }
.etoiles svg.on { fill: var(--orange); }
.etoiles svg.off { fill: #D9DEDB; }

/* ---------- Demandes, offres, listes de gestion ---------- */
.liste-demandes, .liste-offres, .choix-boutiques, .grille-boutiques { display: grid; gap: 10px; }
.carte-demande { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; display: grid; gap: 12px; }
.carte-demande h3 { font-size: 16.5px; }
.carte-demande h3 a { text-decoration: none; }
.carte-demande h3 a:hover { text-decoration: underline; }
.cd-details { color: var(--gris); font-size: 14.5px; margin-top: 4px; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.cd-photo, .photo-demande { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--trait); }
.photo-demande { width: 180px; height: 180px; margin: 12px 0; }
.cd-actions { display: flex; }
.cd-actions .btn { flex: 1; }
.puce { display: inline-flex; align-items: center; gap: 5px; background: #F0F2EF; color: #46555C; border-radius: 20px; padding: 4px 10px; font-size: 13px; }
.puce .ic { width: 14px; height: 14px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; width: max-content; max-width: 100%; }
.badge .ic { width: 14px; height: 14px; }
.badge-en-ligne { background: var(--vert-pale); color: #14573B; }
.badge-en-pause { background: #ECEFED; color: #46555C; }
.badge-suspendue { background: var(--orange-pale); color: #8A3F12; }
.detail-demande h1 { font-size: 24px; }
.detail-demande .rangee { margin-top: 14px; }
.offre { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.offre h3 { font-size: 16px; }
.offre-corps p:last-child { margin-top: 6px; }
.offre-prix { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--trait); padding-top: 12px; }
.offre-prix strong { font-family: var(--titre); font-size: 20px; color: var(--nuit); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; display: grid; gap: 4px; }
.stat span { font-size: 13px; color: var(--gris); }
.stat strong { font-family: var(--titre); font-size: 26px; color: var(--nuit); }
.liste-gestion { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ligne-gestion { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lg-img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex: none; background: #ECE9E3; }
.lg-rond { width: 44px; height: 44px; border-radius: 12px; background: var(--orange-pale); color: var(--orange-fonce); display: grid; place-items: center; flex: none; }
.lg-corps { flex: 1 1 180px; min-width: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--gris); }
.lg-corps a { text-decoration: none; color: var(--nuit); }
.lg-corps a:hover { text-decoration: underline; }
.lg-corps strong { font-size: 15px; color: var(--nuit); }
.lg-actions { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.onglets { display: flex; background: #ECEEEA; border-radius: 12px; padding: 4px; gap: 4px; margin: 14px 0; }
.onglets button { flex: 1; min-height: 44px; border: 0; background: transparent; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--gris); padding: 6px 8px; }
.onglets button.actif { background: var(--blanc); color: var(--nuit); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.connexion { display: grid; gap: 14px; }
.connexion-intro { background: var(--nuit); color: #fff; border-radius: var(--rayon); overflow: hidden; }
.connexion-intro img { width: 100%; height: 170px; object-fit: cover; object-position: 20% 50%; }
.connexion-intro > div { padding: 18px; }
.connexion-intro h2 { color: #fff; font-size: 20px; margin-bottom: 12px; }
.coches { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.coches li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; }
.coches .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--vert); }
.connexion-intro .coches .ic { color: #FFB48A; }
.coches-info .ic, .coches li .ic[class] { }
.coches-info .ic { color: var(--orange-fonce); }
#form-boutique { display: grid; gap: 14px; }
#pan-demo > p { color: var(--gris); margin-bottom: 12px; }

/* ---------- Boutique ---------- */
.boutique-tete { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; }
.boutique-couverture { height: 150px; background: linear-gradient(120deg, var(--nuit), #285166); }
.boutique-couverture img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; }
.boutique-identite { padding: 0 16px 16px; display: grid; gap: 10px; }
.boutique-identite .avatar { margin-top: -48px; }
.bi-texte h1 { font-size: 23px; margin-bottom: 4px; }
.boutique-grille { display: grid; gap: 20px; }
.boutique-apropos p { color: var(--gris); }
.liste-avis { display: grid; gap: 10px; }
.avis { margin: 0; background: var(--blanc); border: 3px solid var(--nuit); border-radius: 18px; padding: 14px 16px; }
.avis-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--orange); margin-bottom: 10px; }
.avis-rond { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #7C8A90; background: #EEF0F3; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--nuit); }
.avis-tete .etoiles svg { width: 20px; height: 20px; }
.avis blockquote { margin: 0; }
.avis figcaption { font-size: 13px; color: var(--gris); margin-top: 6px; }

/* ---------- Infos ---------- */
.infos-grille { display: grid; gap: 14px; }
.infos-grille .panneau p { color: var(--gris); margin-bottom: 12px; }
.liens-liste { display: grid; }
.liens-liste a { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--trait); }
.liens-liste a .ic:last-child { margin-left: auto; color: var(--gris); }

/* ---------- Dialogues, menu, toast ---------- */
dialog { border: 0; padding: 0; color: var(--encre); }
dialog::backdrop { background: rgba(16, 43, 59, .55); }
.dialogue { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.dialogue[open] { display: flex; flex-direction: column; }
.dialogue-large { width: min(640px, calc(100vw - 24px)); }
.dialogue-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 8px 18px; }
.dialogue-tete h2 { font-size: 18px; }
.dialogue-corps { padding: 4px 18px 16px; overflow: auto; display: grid; gap: 12px; }
.dialogue-corps form { display: grid; gap: 14px; }
.dialogue-pied { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: flex-end; padding: 12px 18px 16px; border-top: 1px solid var(--trait); }
.dialogue-pied .btn { flex: 1 1 140px; }
.apercu-message { margin: 0; background: #F2F4F1; border-left: 4px solid var(--wa); padding: 10px 12px; border-radius: 8px; font-size: 14.5px; }
.apercu-carte { max-width: 260px; margin: 0 auto; pointer-events: none; }
.menu { margin: 0 0 0 auto; height: 100vh; max-height: none; width: min(330px, 88vw); background: var(--blanc); }
.menu-tete { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--trait); }
.menu-tete img { height: 30px; width: auto; mix-blend-mode: multiply; }
.menu nav { display: grid; padding: 8px 18px 24px; }
.menu nav a { min-height: 48px; display: flex; align-items: center; text-decoration: none; font-weight: 600; border-bottom: 1px solid #F0F1EE; }
.menu-titre { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); font-weight: 700; margin-top: 16px; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); background: var(--nuit); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; width: max-content; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pied de page et barre mobile ---------- */
.pied { background: var(--nuit); color: #C9D6DB; margin-top: 24px; }
.pied-int { max-width: var(--large); margin: 0 auto; padding: 28px 16px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.pied-marque { grid-column: 1 / -1; }
.pied-marque img { width: 150px; height: auto; margin-bottom: 4px; }
.pied h2 { color: #fff; font-size: 14px; margin-bottom: 6px; }
.pied nav { display: grid; align-content: start; }
.pied nav a, .lien-pied { color: #C9D6DB; text-decoration: none; min-height: 40px; display: flex; align-items: center; font-size: 14.5px; background: none; border: 0; padding: 0; text-align: left; }
.pied nav a:hover, .lien-pied:hover { color: #fff; text-decoration: underline; }
.pied-bas { max-width: var(--large); margin: 0 auto; padding: 14px 16px 22px; font-size: 12.5px; color: #9FB2BA; border-top: 1px solid rgba(255, 255, 255, .12); }
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; background: var(--blanc); border-top: 1px solid var(--trait); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 40; padding-bottom: env(safe-area-inset-bottom, 0); }
.barre-mobile a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; min-height: 60px; text-decoration: none; font-size: 11.5px; font-weight: 600; color: var(--gris); }
.barre-mobile a[aria-current] { color: var(--orange-fonce); }
.barre-mobile .pastille { top: 4px; right: calc(50% - 22px); }
.bm-rond { width: 40px; height: 40px; margin-top: -18px; border-radius: 50%; background: var(--orange); color: #1B1108; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(244, 119, 53, .45); border: 3px solid #fff; }
.bm-accent { color: var(--nuit) !important; }

/* ================= Tablette ================= */
@media (min-width: 620px) {
  .grille-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .grille-cat { grid-template-columns: repeat(4, 1fr); }
  .recherche-hero .btn, .barre-recherche .btn { flex: 0 0 auto; }
  .grille-champs { grid-template-columns: 1fr 1fr; }
  .champ.large { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .actions-fiche { grid-template-columns: 1.4fr 1fr; }
  .grille-boutiques, .choix-boutiques { grid-template-columns: 1fr 1fr; }
  .etapes { grid-template-columns: repeat(3, 1fr); }
  .etapes li { padding: 62px 16px 16px; }
  .carte-demande { grid-template-columns: 1fr auto auto; align-items: center; }
  .cd-actions .btn { flex: none; }
  .offre { grid-template-columns: auto 1fr auto; align-items: center; }
  .offre-prix { grid-column: auto; flex-direction: column; align-items: flex-end; border: 0; padding: 0; }
  .pied-form .btn { flex: 0 0 auto; }
  .dialogue-pied .btn { flex: 0 0 auto; }
  .pied-int { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .pied-marque { grid-column: auto; }
  .bandeau-demande { grid-template-columns: 1fr 1.2fr; align-items: stretch; }
  .bd-img { height: 100%; min-height: 240px; }
  .bd-texte { padding: 28px; align-self: center; }
  .bandeau-vendeur { grid-template-columns: 1fr auto; align-items: center; padding: 28px; }
  .infos-grille { grid-template-columns: 1fr 1fr; }
  .boutique-identite { grid-template-columns: auto 1fr auto; align-items: end; padding: 0 22px 20px; }
  .boutique-couverture { height: 220px; }
  .entete-page { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .connexion { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .connexion-intro img { height: 230px; }
  .choix-boutiques { grid-template-columns: 1fr; }
}

/* ================= Ordinateur ================= */
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .barre-mobile, #ouvrir-menu, .seulement-mobile, #btn-filtres { display: none !important; }
  .entete-int { padding: 10px 24px; gap: 18px; min-height: 72px; }
  .logo img { height: 40px; }
  .recherche-entete { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 300px; border: 1px solid var(--trait-fort); border-radius: 12px; padding: 0 12px; color: var(--gris); background: var(--ivoire); }
  .recherche-entete:focus-within { border-color: var(--orange-fonce); outline: 3px solid var(--orange); }
  .recherche-entete input[type=search] { border: 0; background: transparent; min-height: 42px; padding: 0; font-size: 15px; outline: none !important; }
  .nav-principale { display: flex; gap: 2px; margin-left: auto; }
  .nav-principale a { padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--nuit); white-space: nowrap; }
  .nav-principale a:hover { background: #EEF1EF; }
  .nav-principale a[aria-current] { color: var(--orange-fonce); box-shadow: inset 0 -3px 0 var(--orange); border-radius: 10px 10px 0 0; }
  .entete-actions-droite { margin-left: 0; gap: 8px; }
  .entete .cta-entete { display: inline-flex; white-space: nowrap; }
  .lien-favoris[aria-current] { color: var(--orange-fonce); }
  main { padding: 24px 24px 56px; }
  .toast { bottom: 28px; }
  .hero { min-height: 430px; justify-content: center; }
  .hero picture { position: absolute; inset: 0; }
  .hero-img { height: 100%; object-position: 50% 30%; }
  .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 43, 59, .96) 0%, rgba(16, 43, 59, .88) 36%, rgba(16, 43, 59, .25) 62%, rgba(16, 43, 59, 0) 78%); }
  .hero-texte { z-index: 1; padding: 44px 48px; max-width: 640px; }
  .hero h1 { font-size: 42px; }
  .hero-chapo { font-size: 17px; }
  .grille-pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .bloc { margin-top: 44px; }
  .bloc-tete h2 { font-size: 23px; }
  .entete-page h1 { font-size: 32px; }
  .grille-boutiques { grid-template-columns: repeat(4, 1fr); }
  .grille-boutiques .carte-boutique { flex-direction: column; align-items: flex-start; }
  .grille-boutiques .cb-fleche { display: none; }
  .recherche-grille { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 22px; align-items: start; }
  .filtres { display: block; position: sticky; top: 92px; margin: 0; }
  .recherche-grille .grille-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recherche-outils { justify-content: flex-end; }
  .fiche { grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: start; }
  .fiche-infos h1 { font-size: 30px; }
  .boutique-grille { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; margin-top: 8px; }
  .boutique-grille .grille-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .boutique-apropos { margin-top: 44px; position: sticky; top: 92px; }
  .liste-avis { grid-template-columns: 1fr 1fr; }
  .formulaire { max-width: 820px; padding: 28px; }
  .vue-demander .entete-page, .vue-annonce .entete-page { max-width: 820px; }
  .panneau { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .chargement .etat-visuel { display: none; }
}