/* Sunu Ville — avis, formulaire et classements */
.sva-evaluer, .sva-classement, .sva-grille-avis, .sva-carte-avis, .sva-score, .sva-vide {
  --v: #01723D; --vf: #0B3D2A; --vc: #E3F1E8; --s: #F4B42A; --sc: #FDF1D6; --t: #C8492B; --tc: #F8E3DC;
  --e: #15211B; --g: #5B6B62; --b: #E5E0D3; --sab: #FAF7F0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--e); box-sizing: border-box;
}
.sva-evaluer *, .sva-classement *, .sva-grille-avis *, .sva-score * { box-sizing: border-box; }
.sva-vide { padding: 20px 24px; border-radius: 16px; background: var(--sab); color: var(--g); }

/* ---------- Formulaire « Évaluer » (maquettes 02 / M3a · M3 · M3c · M3d) ---------- */
.sva-evaluer { background: #fff; border: 1px solid var(--b); border-radius: 24px; }
.sva-evaluer--d { padding: 40px; }
.sva-evaluer [hidden] { display: none !important; }
.sva-chargement { margin: 0; padding: 40px; text-align: center; color: var(--g); }
.sva-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sva-ico { flex-shrink: 0; }
.sva-evaluer h2 { margin: 0; font: 700 24px/1.2 "Bricolage Grotesque", "DM Sans", sans-serif; letter-spacing: -.5px; color: var(--e); outline: none; }
.sva-corps { display: flex; flex-direction: column; gap: 24px; }
.sva-aide { margin: -4px 0 0; font-size: 16px; line-height: 1.55; color: var(--g); }
.sva-titre { display: flex; flex-direction: column; gap: 6px; }
.sva-titre .sva-aide { margin: 0; }
.sva-petit { margin: 0; font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-legende { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: var(--g); }
.sva-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.sva-champ { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.sva-champ > span:first-child { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--e); }
.sva-champ input, .sva-champ select, .sva-champ textarea { width: 100%; font-family: inherit; font-size: 16px; line-height: 1.55; padding: 13px 16px; border: 1.5px solid var(--b); border-radius: 12px; background: #fff; color: var(--e); }
.sva-champ textarea { min-height: 80px; resize: vertical; }
.sva-champ ::placeholder { color: var(--g); opacity: 1; }
.sva-champ :focus { outline: 3px solid var(--s); outline-offset: 1px; border-color: var(--v); }
.sva-select { position: relative; display: block; }
.sva-select select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.sva-select select:disabled { background: #fff; color: var(--g); cursor: not-allowed; opacity: .8; }
.sva-select .sva-ico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--e); }
.sva-ou { margin: 0; text-align: center; font-size: 14px; color: var(--g); }
.sva-ou--trait { display: flex; align-items: center; gap: 12px; margin: -4px 0; }
.sva-ou--trait::before, .sva-ou--trait::after { content: ""; flex: 1; height: 1px; background: var(--b); }
.sva-gps { align-self: flex-start; }
.sva-pos { margin: -12px 0 0; font-size: 14px; font-weight: 600; color: var(--v); }
.sva-pos:empty { display: none; }
.sva-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; }
.sva-liens legend { float: left; margin-right: 0; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.sva-liens label { position: relative; cursor: pointer; }
.sva-liens input { position: absolute; opacity: 0; }
.sva-liens span { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--g); background: #fff; box-shadow: inset 0 0 0 1px var(--b); }
.sva-liens input:checked + span { background: var(--vf); color: #fff; box-shadow: none; }
.sva-liens input:focus-visible + span { outline: 3px solid var(--s); outline-offset: 2px; }

/* Lieu choisi */
.sva-lieu { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; background: #F1F8F3; }
.sva-lieu__ico { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--vc); color: var(--v); }
.sva-lieu__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sva-lieu__txt strong { font-size: 16px; font-weight: 600; line-height: 1.4; }
.sva-lieu__txt small { font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-lien { background: none; border: 0; padding: 0; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--v); cursor: pointer; text-transform: none; letter-spacing: 0; }
.sva-lien:hover { text-decoration: underline; }

/* Notes 1 à 5 */
.sva-crits { display: flex; flex-direction: column; gap: 12px; }
.sva-critere { display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 20px; border: 1px solid var(--b); border-radius: 16px; min-width: 0; }
.sva-critere__ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--sab); color: var(--vf); }
.sva-critere__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sva-critere__txt strong { font-size: 16px; font-weight: 600; line-height: 1.4; }
.sva-critere__txt small { font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-notes { display: flex; gap: 8px; flex-shrink: 0; }
.sva-notes label { position: relative; cursor: pointer; }
.sva-notes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sva-note-btn { display: grid; place-items: center; width: 44px; height: 40px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--b); font-size: 16px; font-weight: 600; color: var(--g); transition: background .12s; }
.sva-notes label:hover .sva-note-btn { box-shadow: inset 0 0 0 1.5px var(--v); color: var(--v); }
.sva-note-btn.terre { background: var(--t); color: #fff !important; box-shadow: none !important; }
.sva-note-btn.vert { background: var(--v); color: #fff !important; box-shadow: none !important; }
.sva-notes input:focus-visible + .sva-note-btn { outline: 3px solid var(--s); outline-offset: 2px; }
.sva-echelle { display: flex; justify-content: space-between; margin: -8px 0 0; font-size: 14px; color: var(--g); }

/* Photo, cases, interrupteur */
.sva-ajout { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 20px; border: 2px dashed var(--v); border-radius: 20px; background: #F1F8F3; text-align: center; cursor: pointer; }
.sva-ajout input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sva-ajout:focus-within { outline: 3px solid var(--s); outline-offset: 2px; }
.sva-ajout__icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: #fff; margin-bottom: 2px; }
.sva-ajout strong { font-size: 16px; font-weight: 600; line-height: 1.4; }
.sva-ajout small { font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-apercu { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--g); }
.sva-apercu:empty { display: none; }
.sva-apercu img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.sva-cases { display: flex; flex-direction: column; gap: 14px; margin-top: -4px; }
.sva-case { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 16px; line-height: 1.55; }
.sva-case input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.sva-case > i { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--b); background: #fff; display: grid; place-items: center; color: transparent; }
.sva-case input:checked + i { background: var(--v); border-color: var(--v); color: #fff; }
.sva-case input:focus-visible + i { outline: 3px solid var(--s); outline-offset: 2px; }
.sva-case a { color: var(--v); }
.sva-groupe { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sva-groupe legend { padding: 0; margin-bottom: 14px; font-size: 16px; font-weight: 600; }
.sva-inter { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--b); border-radius: 16px; background: #fff; cursor: pointer; }
.sva-inter > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sva-inter strong { font-size: 16px; font-weight: 600; line-height: 1.4; }
.sva-inter small { font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-inter input { position: absolute; opacity: 0; right: 16px; width: 36px; height: 20px; margin: 0; }
.sva-inter__piste { position: relative; width: 36px; height: 20px; flex-shrink: 0; border-radius: 20px; background: var(--b); transition: background .15s; }
.sva-inter__piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.sva-inter input:checked + .sva-inter__piste { background: var(--v); }
.sva-inter input:checked + .sva-inter__piste::after { left: 19px; }
.sva-inter input:focus-visible + .sva-inter__piste { outline: 3px solid var(--s); outline-offset: 2px; }
.sva-info { margin: 0; padding: 16px; border-radius: 16px; background: var(--sc); font-size: 14px; line-height: 1.5; }
.sva-info strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.sva-info--vert { background: #F1F8F3; }
.sva-info--liste { list-style: none; display: flex; flex-direction: column; gap: 10px; background: #F1F8F3; margin-top: -8px; }
.sva-info--liste li { display: flex; align-items: center; gap: 10px; }
.sva-info--liste li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v); flex-shrink: 0; }
.sva-ensuite { margin: 0; font-size: 16px; font-weight: 600; }

/* Récapitulatif */
.sva-recap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 20px; border: 1px solid var(--b); border-radius: 16px; }
.sva-recap header { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sva-recap header strong { font-size: 16px; font-weight: 600; }
.sva-recap p { margin: 0; font-size: 14px; line-height: 1.5; }
.sva-recap__titre { font-size: 16px !important; font-weight: 600; }
.sva-puces { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sva-puce { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.sva-puce--soleil { background: var(--sc); color: var(--e); }
.sva-puce--terre { background: var(--tc); color: var(--t); }
.sva-puce--vert { background: var(--vc); color: var(--vf); }
.sva-recap-notes { list-style: none; align-self: stretch; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sva-recap-notes li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.5; }
.sva-etoiles-txt { color: var(--s); letter-spacing: 1px; white-space: nowrap; }
.sva-etoiles-txt i { font-style: normal; color: var(--s); }

/* Pied, boutons, messages */
.sva-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--b); }
.sva-retour { border: 0; background: none; padding: 14px 16px; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--v); cursor: pointer; }
.sva-retour:hover { text-decoration: underline; }
.sva-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1.4; padding: 14px 24px; border-radius: 999px; border: 0; background: var(--v); color: #fff !important; cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap; }
.sva-btn:hover { background: var(--vf); }
.sva-btn--sec { background: #fff; color: var(--v) !important; box-shadow: inset 0 0 0 1.5px var(--v); padding: 15px 24px; }
.sva-btn--sec:hover { background: #F1F8F3; }
.sva-btn:disabled { opacity: .6; cursor: wait; }
.sva-btn:focus-visible, .sva-retour:focus-visible, .sva-lien:focus-visible { outline: 3px solid var(--s); outline-offset: 2px; }
.sva-message { margin: 0; color: var(--t); font-weight: 600; font-size: 14px; }
.sva-message:empty { display: none; }
.sva-message.visible { background: var(--tc); padding: 12px 16px; border-radius: 12px; }
.sva-piege { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.sva-erreur { padding: 24px; color: var(--t); }
.sva-evaluer--fini { padding: 40px 24px; }
.sva-merci { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; outline: none; }
.sva-merci p { margin: 0; color: var(--g); }
.sva-merci__icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--vc); color: var(--v); }
.sva-merci__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* Mobile : étapes plein écran, barre d'actions fixe */
.sva-evaluer--m { border: 0; border-radius: 0; background: none; }
.sva-evaluer--m .sva-progres { position: fixed; z-index: 890; left: 0; right: 0; top: 60px; height: 4px; background: var(--b); }
.admin-bar .sva-evaluer--m .sva-progres { top: 106px; }
.sva-evaluer--m .sva-progres i { display: block; height: 100%; background: var(--v); }
.sva-evaluer--m .sva-corps { gap: 14px; padding: 28px 20px 24px; }
.sva-evaluer--m .sva-aide { font-size: 14px; line-height: 1.5; }
.sva-evaluer--m .sva-grille { grid-template-columns: 1fr; gap: 14px; }
.sva-evaluer--m .sva-gps { align-self: stretch; }
.sva-evaluer--m .sva-ou { margin: -2px 0; }
.sva-evaluer--m .sva-pos { margin: 0; }
.sva-evaluer--m .sva-lieu { padding: 16px; }
.sva-evaluer--m .sva-lieu__ico { width: auto; height: auto; background: none; }
.sva-evaluer--m .sva-crits { gap: 14px; }
.sva-evaluer--m .sva-critere { flex-wrap: wrap; gap: 12px 8px; padding: 16px; background: #fff; }
.sva-evaluer--m .sva-critere__ico { width: auto; height: auto; background: none; color: var(--e); }
.sva-evaluer--m .sva-critere__txt { flex: 1; }
.sva-evaluer--m .sva-notes { flex-basis: 100%; }
.sva-evaluer--m .sva-note-btn { width: 40px; height: 36px; }
.sva-evaluer--m .sva-champ textarea { min-height: 106px; }
.sva-evaluer--m .sva-recap { background: #fff; padding: 16px; gap: 6px; }
.sva-evaluer--m .sva-recap header { align-items: flex-start; }
.sva-evaluer--m .sva-recap strong { font-size: 16px; font-weight: 600; line-height: 1.4; }
.sva-evaluer--m .sva-actions { position: fixed; z-index: 880; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; padding: 16px 20px calc(32px + env(safe-area-inset-bottom) / 2); background: #fff; border-top: 1px solid var(--b); }
.sva-evaluer--m .sva-actions .sva-btn:not(.sva-btn--sec) { flex: 1; }
.sva-evaluer--m.sva-evaluer--fini { margin: 24px 20px; background: #fff; border: 1px solid var(--b); border-radius: 20px; }

/* ---------- Notes ---------- */
.sva-note { display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; line-height: 1.4; padding: 6px 12px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.sva-note--bon { background: var(--vc); color: var(--v); }
.sva-note--moyen { background: var(--sc); color: #8A5A00; }
.sva-note--faible { background: var(--tc); color: var(--t); }
.sva-note--vide { background: var(--sab); color: var(--g); }
.sva-txt--bon { color: var(--v); } .sva-txt--moyen { color: #B07A00; } .sva-txt--faible { color: var(--t); } .sva-txt--vide { color: var(--g); }
.sva-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--b); }
.sva-point--bon { background: var(--v); } .sva-point--moyen { background: var(--s); } .sva-point--faible { background: var(--t); }

/* ---------- Classement ---------- */
.sva-classement { border: 1px solid var(--b); border-radius: 16px; overflow-x: auto; background: #fff; }
.sva-classement table { min-width: 100%; }
.sva-classement td:nth-child(2) { min-width: 150px; }
.sva-classement table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sva-classement th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--g); padding: 12px 16px; background: var(--sab); border-bottom: 1px solid var(--b); }
.sva-classement td { padding: 14px 16px; border-bottom: 1px solid var(--b); vertical-align: middle; }
.sva-classement tr:last-child td { border-bottom: 0; }
.sva-rang { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; color: var(--v); width: 48px; }
.sva-podium .sva-rang { color: #B07A00; }
.sva-nom { font-weight: 700; color: var(--e) !important; text-decoration: none; }
.sva-nom:hover { color: var(--v) !important; text-decoration: underline; }
.sva-sous { display: block; font-size: 13px; color: var(--g); }
.sva-nb { color: var(--g); }
.sva-methode { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--g); background: var(--sab); }

/* ---------- Cartes d'avis (composant « Carte / Avis » de la maquette) ---------- */
.sva-grille-avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sva-grille-avis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sva-grille-avis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sva-grille-avis--1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) { .sva-grille-avis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sva-grille-avis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sva-grille-avis, .sva-grille-avis--4, .sva-grille-avis--2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sva-grille-avis--carrousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -20px; padding-right: 20px; scrollbar-width: none; }
  .sva-grille-avis--carrousel::-webkit-scrollbar { display: none; }
  .sva-grille-avis--carrousel .sva-carte-avis { flex: 0 0 300px; scroll-snap-align: start; }
  .sva-grille-avis--carrousel .sva-carte-avis__texte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.sva-carte-avis { position: relative; background: #fff; border: 1px solid var(--b); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px; filter: drop-shadow(0 8px 12px rgba(20, 33, 26, .08)); }
.sva-carte-avis__auteur { display: flex; align-items: center; gap: 12px; }
.sva-avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--sc); color: var(--e); font-weight: 600; font-size: 16px; line-height: 1.4; display: grid; place-items: center; flex-shrink: 0; }
.sva-carte-avis__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sva-carte-avis__id strong { font-size: 16px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sva-carte-avis__id span { font-size: 14px; line-height: 1.5; color: var(--g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sva-carte-avis__titre { font-family: "Bricolage Grotesque", "DM Sans", sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: 0; margin: 0; color: var(--e); }
.sva-carte-avis__titre a { color: inherit !important; text-decoration: none; }
.sva-carte-avis__titre a:hover { color: var(--v) !important; }
.sva-carte-avis__texte { margin: 0; font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-photo { width: 100%; height: 160px; object-fit: cover; border-radius: 14px; }
.sva-carte-avis__notes { list-style: none; margin: 0; padding: 16px; background: var(--sab); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.sva-carte-avis__notes li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--e); }
.sva-carte-avis__notes li > span:first-of-type { flex: 1; min-width: 0; }
.sva-ico { flex-shrink: 0; display: block; }
.sva-jauge5 { display: inline-flex; gap: 3px; }
.sva-jauge5 i { width: 14px; height: 6px; border-radius: 3px; background: var(--b); }
.sva-jauge5 i.sva-vert { background: var(--v); } .sva-jauge5 i.sva-terre { background: var(--t); }
.sva-carte-avis__actions { display: flex; align-items: center; gap: 16px; font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-carte-avis__actions time { margin-left: auto; white-space: nowrap; }
.sva-annee { display: none; }
.sva-utile, .sva-repondre { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.sva-utile { color: var(--v); }
.sva-repondre { color: var(--g) !important; }
.sva-utile.fait { color: var(--vf); }
.sva-note--soleil { background: var(--sc); color: var(--e); }
.sva-note--vert { background: var(--vc); color: var(--vf); }
.sva-note--terre { background: var(--tc); color: var(--t); }

/* ---------- Carte de score ---------- */
.sva-score { background: #fff; border: 1px solid var(--b); border-radius: 18px; padding: 22px; }
.sva-score__tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.sva-score__nom { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; font-weight: 800; }
.sva-score__rang { font-size: 13px; color: var(--g); }
.sva-score__note { font-family: "Bricolage Grotesque", sans-serif; font-size: 44px; font-weight: 800; line-height: 1; text-align: right; }
.sva-score__note small { display: block; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 500; color: var(--g); margin-top: 4px; }
.sva-criteres { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sva-criteres li { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 40px; gap: 14px; align-items: center; font-size: 14px; }
.sva-criteres__nom { font-weight: 600; }
.sva-criteres__val { font-weight: 700; text-align: right; }
.sva-jauge { height: 10px; border-radius: 10px; background: var(--sab); overflow: hidden; }
.sva-jauge i { display: block; height: 100%; border-radius: 10px; }
.sva-jauge--bon { background: var(--v); } .sva-jauge--moyen { background: var(--s); } .sva-jauge--faible { background: var(--t); } .sva-jauge--vide { background: transparent; }

@media (max-width: 640px) {
  .sva-etoile { width: 40px; height: 40px; font-size: 26px; }
  .sva-etoiles__txt { flex-basis: 100%; margin: 2px 0 0; }
  .sva-col-crit { display: none; }
  .sva-classement td, .sva-classement th { padding: 12px 10px; }
  .sva-criteres li { grid-template-columns: 1fr 34px; }
  .sva-criteres .sva-jauge { grid-column: 1 / -1; grid-row: 2; }
  .sva-score__nom { font-size: 20px; }
  .sva-score__note { font-size: 36px; }
}
.sva-evaluer [hidden] { display: none !important; }

.sva-reponse { background: var(--vc); border-left: 4px solid var(--v); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.sva-reponse strong { color: var(--v); font-size: 13px; }
.sva-reponse p { margin: 4px 0 0 !important; }

/* Mots très longs (liens, texte sans espaces) : retour à la ligne au lieu de déborder. */
.sva-evaluer, .sva-grille-avis, .sva-carte-avis, .sva-recap p, .sva-recap strong { overflow-wrap: anywhere; min-width: 0; }
.sva-evaluer input, .sva-evaluer textarea, .sva-evaluer select { overflow-wrap: normal; }

/* ---------- Bandeau (étapes) et colonne latérale de la page Évaluer ---------- */
.sva-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sva-etapes li { display: flex; align-items: center; gap: 10px; font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; color: #E3F1E8; }
.sva-etapes li > span { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #E3F1E8; font-size: 14px; }
.sva-etapes li.actif, .sva-etapes li.fait { color: #fff; }
.sva-etapes li.actif > span { background: #F4B42A; color: #0B3D2A; box-shadow: none; }
.sva-etapes li.fait > span { background: #25D366; color: #0B3D2A; box-shadow: none; }
.sva-etapes li.sva-trait { width: 56px; height: 2px; background: #01723D; }
[data-sva-cote] { --v: #01723D; --vf: #0B3D2A; --sc: #FDF1D6; --e: #15211B; --g: #5B6B62; --b: #E5E0D3; font-family: "DM Sans", system-ui, sans-serif; color: var(--e); }
.sva-bloc { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--b); border-radius: 24px; background: #fff; }
.sva-bloc--soleil { background: var(--sc); border-color: var(--sc); gap: 16px; }
.sva-bloc .sva-h3 { margin: 0; font: 700 24px/1.2 "Bricolage Grotesque", "DM Sans", sans-serif; letter-spacing: -.5px; color: var(--vf); }
.sva-bloc .sva-h4 { margin: 0; font: 600 18px/1.3 "Bricolage Grotesque", "DM Sans", sans-serif; color: var(--e); }
.sva-bloc--soleil .sva-h4 { color: var(--vf); }
.sva-bloc .sva-petit { margin: 0; font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-bloc--soleil .sva-petit { color: var(--e); }
.sva-bloc .sva-legende { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: var(--g); }
.sva-prog { height: 8px; border-radius: 4px; background: var(--b); overflow: hidden; }
.sva-prog i { display: block; height: 100%; border-radius: 4px; background: var(--v); }
.sva-coches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sva-coches li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.sva-coches .sva-ico { color: var(--v); margin-top: 2px; }
.sva-coches--petit { gap: 10px; }
.sva-coches--petit li { font-size: 14px; line-height: 1.5; }
.sva-lien-fleche { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--v); text-decoration: none; }
.sva-lien-fleche:hover { text-decoration: underline; }

/* ---------- Bloc « Répondre » de la page d'un avis ---------- */
.sva-repondre-bloc { --v: #01723D; --vf: #0B3D2A; --e: #15211B; --g: #5B6B62; --b: #E5E0D3; --s: #F4B42A; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border: 1px solid var(--b); border-radius: 24px; background: #fff; font-family: "DM Sans", system-ui, sans-serif; color: var(--e); scroll-margin-top: 100px; }
.sva-repondre-bloc h2 { margin: 0; font: 600 18px/1.3 "Bricolage Grotesque", "DM Sans", sans-serif; }
.sva-repondre-bloc p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--g); }
.sva-repondre-bloc form { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sva-repondre-bloc .sva-champ { align-self: stretch; }
.sva-signature { display: flex; flex-wrap: wrap; gap: 8px 20px; border: 0; margin: 0; padding: 0; font-size: 14px; }
.sva-signature legend { padding: 0; margin-bottom: 6px; font-weight: 600; color: var(--e); }
.sva-signature label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sva-signature input { accent-color: var(--v); }
.sva-repondre-ok { padding: 10px 14px; border-radius: 12px; background: #E3F1E8; color: var(--vf) !important; font-weight: 600; }
.sva-reponse p { white-space: normal; }
@media (max-width: 767px) { .sva-repondre-bloc { padding: 18px; border-radius: 18px; } }

/* ---------- Réponses des habitants (#echanges) ---------- */
.sva-echanges { --v: #01723D; --vf: #0B3D2A; --vc: #E3F1E8; --e: #15211B; --g: #5B6B62; --b: #E5E0D3; --s: #F4B42A; --t: #C8492B; --tc: #F8E3DC; --sab: #FAF7F0;
  display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid var(--b); border-radius: 24px; background: #fff; font-family: "DM Sans", system-ui, sans-serif; color: var(--e); scroll-margin-top: 100px; box-sizing: border-box; }
.sva-echanges * { box-sizing: border-box; }
.sva-echanges h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 18px/1.3 "Bricolage Grotesque", "DM Sans", sans-serif; }
.sva-echanges h2 span { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--vc); color: var(--vf); font: 700 13px/26px "DM Sans", sans-serif; text-align: center; }
.sva-echanges h3 { margin: 0; font: 600 16px/1.4 "DM Sans", sans-serif; }
.sva-echanges p { margin: 0; }
.sva-echanges__vide { color: var(--g); font-size: 16px; line-height: 1.55; }
.sva-echanges__msg { padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 15px; line-height: 1.5; }
.sva-echanges__msg--ok { background: var(--vc); color: var(--vf); }
.sva-echanges__msg--erreur { background: var(--tc); color: #8A2E18; }
.sva-echanges__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sva-echange { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--b); }
.sva-echange:first-child { border-top: 0; padding-top: 0; }
.sva-echange .sva-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--sab); color: var(--vf); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.sva-echange__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 15px; }
.sva-echange__tete time { font-size: 13px; color: var(--g); }
.sva-echange__texte { margin-top: 4px !important; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.sva-echanges__form { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 18px; border-top: 1px solid var(--b); }
.sva-echanges__form .sva-champ { align-self: stretch; }
.sva-echanges__form .sva-case { font-size: 14px; line-height: 1.5; color: var(--g); }
.sva-echanges .sva-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--v); color: #fff; font: 600 16px/1.2 "DM Sans", sans-serif; cursor: pointer; text-decoration: none; }
.sva-echanges .sva-btn:hover { background: var(--vf); }
.sva-repondre-bloc + .sva-echanges { margin-top: 0; }
@media (max-width: 767px) { .sva-echanges { padding: 18px; border-radius: 18px; } .sva-echanges .sva-btn { align-self: stretch; } }

/* ---------- Carte d'avis : « Ce qui va bien » / « À améliorer », hauteurs égales ---------- */
.sva-grille-avis { align-items: stretch; }
.sva-carte-avis { height: 100%; }
.sva-carte-avis__auteur { align-items: flex-start; }
.sva-avatar--anonyme { background: var(--sab); color: var(--g); }
.sva-avatar--anonyme .sva-ico { width: 20px; height: 20px; }
.sva-carte-avis__id .sva-carte-avis__lieu { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.sva-carte-avis__titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sva-carte-avis--complet .sva-carte-avis__titre { display: block; }
.sva-carte-avis__avis { display: flex; flex-direction: column; gap: 10px; }
.sva-pt { border-radius: 12px; padding: 10px 12px; }
.sva-pt--bien { background: var(--vc); }
.sva-pt--ameliorer { background: var(--tc); }
.sva-pt__lib { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.sva-pt__lib .sva-ico { width: 14px; height: 14px; }
.sva-pt--bien .sva-pt__lib { color: var(--vf); }
.sva-pt--ameliorer .sva-pt__lib { color: var(--t); }
.sva-pt p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--e); overflow-wrap: anywhere; }
.sva-carte-avis__avis--court .sva-pt p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sva-lire { align-self: flex-start; margin-top: -6px; font-size: 14px; font-weight: 600; color: var(--v) !important; text-decoration: none; }
.sva-lire:hover { text-decoration: underline; }
.sva-photo-lien { display: block; }
.sva-carte-avis .sva-photo { height: 140px !important; width: 100% !important; object-fit: cover; }
.sva-carte-avis--complet .sva-photo { height: auto !important; max-height: 420px; }
.sva-carte-avis__bas { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.sva-carte-avis__bas > .sva-reponse { order: 0; }
.sva-carte-avis > .sva-carte-avis__avis, .sva-carte-avis > .sva-carte-avis__bas, .sva-carte-avis > .sva-photo-lien { align-self: stretch; width: 100%; }
.sva-carte-avis__avis > .sva-pt { align-self: stretch; width: 100%; display: block; }
.sva-pt__lib { white-space: nowrap; }