/* Reputation Map — style. Clair, aéré, chaleureux ; grands chiffres, grandes courbes, peu de petits caractères. */
:root {
  --navy: #0a1f44; --navy2: #123a82; --teal: #12b5a6; --teal-d: #0b8f84; --coral: #ff6b5a; --sun: #ffb347;
  --ink: #14213d; --muted: #66749a; --bg: #f4f7fb; --carte: #ffffff; --ligne: #e4e9f2;
  --ombre: 0 18px 40px -18px rgba(10, 31, 68, .28), 0 2px 6px rgba(10, 31, 68, .05);
  --rayon: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -.02em; margin: 0; }
button, input, select { font: inherit; color: inherit; }

/* — barre du haut — */
.haut { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 12px clamp(14px, 3vw, 36px); background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--ligne); }
.logo { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; color: var(--navy); letter-spacing: -.03em; white-space: nowrap; }
.logo b { font-weight: 800; color: var(--teal-d); }
.recherche { position: relative; flex: 1; max-width: 640px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ligne); border-radius: 999px;
  padding: 0 18px; height: 46px; box-shadow: 0 2px 10px rgba(10, 31, 68, .06); transition: box-shadow .2s, border-color .2s; color: var(--muted); }
.recherche:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18, 181, 166, .16); }
.recherche input[type=text] { flex: 1; border: 0; outline: 0; background: transparent; height: 100%; font-size: 15px; color: var(--ink); min-width: 0; }
.suggestions { position: absolute; top: 54px; left: 0; right: 0; background: #fff; border: 1px solid var(--ligne); border-radius: 18px; box-shadow: var(--ombre); padding: 8px; max-height: 70vh; overflow: auto; }
.suggestions .groupe { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.suggestions a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--ink); }
.suggestions a:hover, .suggestions a.actif { background: #eef6f5; }
.suggestions .pastille { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--navy2); flex: none; }
.suggestions .pastille.zone { background: var(--sun, #ffb347); color: var(--navy); } .suggestions .pastille.commune { background: var(--teal-d); } .suggestions .pastille.place { background: var(--coral); } .suggestions .pastille.epci { background: #7a5cd6; }
.suggestions b { display: block; font-size: 15px; } .suggestions small { color: var(--muted); font-size: 13px; }
.periodes { display: flex; gap: 4px; background: #eaeff7; padding: 4px; border-radius: 999px; }
.periodes a { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); }
.periodes a.actif { background: var(--navy); color: #fff; box-shadow: 0 4px 10px -4px rgba(10, 31, 68, .5); }
.affiner { border: 1px solid var(--ligne); background: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 600; cursor: pointer; color: var(--navy); }
.affiner:hover { border-color: var(--teal); color: var(--teal-d); }

/* — tiroir « Affiner » — */
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: #fff; z-index: 50; padding: 22px 24px; transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s; box-shadow: -20px 0 50px -20px rgba(10, 31, 68, .4); }
.tiroir.ouvert { transform: none; visibility: visible; transition: transform .28s ease; }
.tiroir-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 18px; }
.tiroir label { display: block; margin: 14px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.tiroir select { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff; font-size: 15px; color: var(--ink); }
.tiroir { overflow-y: auto; }
.univers-bloc { border: 1px solid var(--ligne); border-radius: 16px; padding: 6px 16px 10px; margin: 14px 0 8px; }
.univers-bloc legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tiroir .univers-bloc label.uv { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 0; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.tiroir .univers-bloc label.uv-type { font-weight: 700; }
.univers-bloc input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--teal-d); }
.uv-liste { margin: 0 0 6px 8px; padding-left: 18px; border-left: 2px solid var(--ligne); }
.tiroir .univers-bloc .uv-liste label.uv { font-size: 14px; }
.uv-aide { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.fermer { border: 0; background: #eef1f7; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; }
.bouton { display: inline-block; margin-top: 12px; width: 100%; padding: 13px; border: 0; border-radius: 14px; background: var(--navy); color: #fff; font-weight: 700; cursor: pointer; }
.bouton:hover { background: var(--navy2); }
.effacer { display: block; text-align: center; margin-top: 12px; color: var(--muted); font-size: 14px; }
.voile { position: fixed; inset: 0; background: rgba(10, 31, 68, .38); z-index: 40; }

/* — ouverture : le grand titre — */
.hero { position: relative; overflow: hidden; color: #fff; padding: clamp(40px, 7vw, 84px) clamp(16px, 4vw, 48px) clamp(100px, 11vw, 150px);
  background: radial-gradient(1000px 420px at 85% -10%, rgba(18, 181, 166, .55), transparent 60%), radial-gradient(700px 380px at 5% 110%, rgba(255, 107, 90, .28), transparent 60%),
              linear-gradient(135deg, var(--navy) 0%, #0e2f6b 55%, #0f5a7a 100%); }
.hero-bas { padding-bottom: 56px; }
.hero-in { max-width: 1180px; margin: 0 auto; position: relative; }
.chemin { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.chemin span:not(:last-child)::after { content: "›"; margin-left: 8px; opacity: .6; }
.chemin span.precis { background: rgba(255, 255, 255, .14); padding: 3px 12px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.chemin span.precis::after { content: none !important; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: 1.02; font-weight: 800; max-width: 16ch; text-wrap: balance; }
.sous-titre { margin: 16px 0 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: rgba(255, 255, 255, .86); }
.en-cours { margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--sun); color: #4a2d00; padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
.message { margin: 22px 0 0; max-width: 40ch; font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.25; text-wrap: balance; }
.fiab { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13.5px; cursor: help; outline: none; }
.fiab-point { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 179, 71, .25); }
.fiab-point.ok { background: #4be3a7; box-shadow: 0 0 0 4px rgba(75, 227, 167, .25); }
.fiab-bulle { position: absolute; left: 0; top: 130%; width: min(380px, 80vw); padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 13.5px; box-shadow: var(--ombre); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: .18s; z-index: 5; }
.fiab:hover .fiab-bulle, .fiab:focus .fiab-bulle { opacity: 1; transform: none; }

/* — les quatre grandes tuiles — */
.tuiles { max-width: 1180px; margin: -76px auto 0; padding: 0 clamp(14px, 3vw, 24px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.tuile { position: relative; background: var(--carte); border-radius: var(--rayon); padding: 22px 24px 20px; box-shadow: var(--ombre); min-height: 168px; }
.t-lib { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.t-val { margin-top: 8px; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.05; }
.t-val small { font-size: .42em; font-weight: 600; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.t-evol { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; }
.delta { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.haut { background: #dcf8ee; color: #08795b; } .delta.bas { background: #ffe6e2; color: #c23a2b; } .delta.neutre { background: #edf0f6; color: var(--muted); }
.vs { font-size: 13px; color: var(--muted); }
.mini { display: block; width: 100%; height: 34px; margin-top: 12px; opacity: .9; animation: revele 1.3s .3s ease both; }
.mini path { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.legende-tuiles { max-width: 1180px; margin: 14px auto 0; padding: 0 clamp(14px, 3vw, 24px); font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* — sections — */
.section { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(14px, 3vw, 24px) 0; }
.section-avis { padding-top: 0; margin-top: -26px; }
.kicker { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-d); }
.section h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin: 6px 0 22px; text-wrap: balance; max-width: 36ch; }
.carte-large { background: var(--carte); border-radius: var(--rayon); padding: 22px clamp(12px, 2vw, 28px) 18px; box-shadow: var(--ombre); }
.onglets { display: inline-flex; flex-wrap: wrap; gap: 6px; background: #eaeff7; padding: 5px; border-radius: 999px; margin-bottom: 14px; }
.onglet { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.onglet.actif { background: var(--navy); color: #fff; }
.filtre-actif { background: var(--coral); color: #fff !important; }
.panneau { display: none; } .panneau.actif { display: block; animation: monte .45s ease both; }
.legende { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 13.5px; color: var(--muted); }
.lg { display: inline-block; width: 26px; height: 0; border-top: 3.5px solid var(--teal); border-radius: 2px; margin-right: 2px; vertical-align: middle; }
.lg.b { border-top: 3px dashed #aab4cd; }
svg.courbe { width: 100%; height: auto; display: block; }
svg.courbe .gr { stroke: #edf0f6; stroke-width: 1; } svg.courbe .ax { fill: #8a96b5; font: 600 12px "Inter", system-ui, sans-serif; }
svg.courbe .cur { fill: none; stroke: var(--teal); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.5s .2s ease forwards; }
svg.courbe .prec { fill: none; stroke: #aab4cd; stroke-width: 2.4; stroke-dasharray: 5 6; stroke-linecap: round; pathLength: auto; }
svg.courbe .aire { opacity: 0; animation: fond 1.2s .9s ease forwards; }
svg.courbe .pt { fill: #fff; stroke: var(--teal); stroke-width: 3; transition: r .15s; cursor: default; } svg.courbe .pt:hover { r: 8; }
svg.courbe .pt-p { fill: #aab4cd; }
svg.courbe .pt-f { fill: #fff; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 2 2; cursor: default; } svg.courbe .pt-pf { fill: #fff; stroke: #aab4cd; stroke-width: 2; cursor: default; }
.t-google { margin-top: .4rem; font-size: .78rem; color: var(--muted, #6b7a99); line-height: 1.25; }
.vide { margin: 0; padding: 22px; border-radius: 16px; background: #eef2f9; color: var(--muted); text-align: center; font-size: 15px; }

/* — ce qui plaît / ce qui irrite — */
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.colonne { min-width: 0; background: var(--carte); border-radius: var(--rayon); padding: 24px 26px 20px; box-shadow: var(--ombre); }
.colonne h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.colonne.forts h3 { color: #08795b; } .colonne.irritants h3 { color: #c23a2b; }
a.ligne-theme { display: block; margin: 8px -10px 10px; padding: 6px 10px; border-radius: 14px; transition: background .15s, opacity .15s; }
a.ligne-theme:hover { background: #f3f8f8; }
.ligne-theme.faible { opacity: .5; } .ligne-theme.faible:hover { opacity: .85; }
section[id] { scroll-margin-top: 110px; }                                       /* une ancre (#chaleur) ne passe pas sous l'en-tête fixe */
.piste { position: relative; } .piste .moy { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #1c3f94; opacity: .75; border-radius: 2px; }
.lt-plus { display: block; margin-top: 2px; font-weight: 700; color: #34405f; }
.colonne .vide, .carte-sujet .vide { margin: 10px 0 14px; font-size: 14px; color: var(--muted); }
.lt-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1.05rem; font-weight: 700; }
.lt-tete b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.piste { height: 10px; border-radius: 999px; background: #eef1f7; margin: 8px 0 5px; overflow: hidden; }
.piste span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4be3a7, var(--teal)); transform-origin: left; animation: grandit .9s .2s ease both; }
.irritants .piste span { background: linear-gradient(90deg, var(--sun), var(--coral)); }
.lt-pied { font-size: 13px; color: var(--muted); }
.frequents { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: 14.5px; color: var(--muted); }
.chip { display: inline-flex; gap: 7px; align-items: baseline; background: #fff; border: 1px solid var(--ligne); padding: 6px 14px; border-radius: 999px; font-weight: 600; color: var(--ink); }
.chip em { font-style: normal; color: var(--teal-d); font-size: 13px; } .chip:hover { border-color: var(--teal); }
.lg-note { flex-basis: 100%; font-size: 12.5px; }

/* — établissements — */
.colonne.lieux { padding-bottom: 12px; }
.colonne.lieux h3 i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-style: normal; font-size: 15px; color: #fff; background: var(--teal); }
.lieux.progression h3 i { background: var(--navy2); } .lieux.surveiller h3 i { background: var(--coral); }
.lieu { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-top: 1px solid var(--ligne); border-radius: 12px; transition: background .15s; }
.lieu:hover { background: #f1f7f7; }
.rang { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef1f7; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--navy); }
.lieu-nom { flex: 1; min-width: 0; } .lieu-nom b { display: block; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lieu-nom small { color: var(--muted); font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lieu-val { flex: none; font-size: 1.35rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }
.lieu-val small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.colonne.lieux .vide { margin-bottom: 10px; }

/* — avis — */
.citations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.citations.liste { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); margin-top: 8px; }
.citation { margin: 0; background: var(--carte); border-radius: 20px; padding: 24px 22px 18px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 14px; position: relative; border-top: 5px solid var(--ligne); }
.citation.positifs { border-top-color: var(--teal); } .citation.negatifs { border-top-color: var(--coral); }
.citation blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; color: #26324f; flex: 1; }
.citation blockquote::before { content: "“"; display: block; font: 800 46px/0.6 Georgia, serif; color: var(--ligne); margin-bottom: 6px; }
.citation figcaption { font-size: 13px; color: var(--muted); } .citation figcaption a { color: var(--navy); font-weight: 600; } .citation figcaption a:hover { color: var(--teal-d); }
.etoiles { color: #f5a623; letter-spacing: 2px; margin-right: 6px; } .etoiles i { font-style: normal; color: #e3e8f2; }
.bouton-lien { display: inline-block; margin-top: 20px; padding: 12px 22px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; } .bouton-lien:hover { background: var(--navy2); }
.pager { display: flex; justify-content: center; gap: 22px; margin-top: 28px; font-weight: 700; color: var(--muted); } .pager a { color: var(--navy); }

/* — pied — */
.pied { margin-top: clamp(56px, 8vw, 96px); background: var(--navy); color: rgba(255, 255, 255, .8); padding: 36px clamp(16px, 4vw, 48px); }
.pied-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; font-size: 14.5px; }
.pied strong { color: #fff; font-size: 18px; } .pied strong b { color: #5ee0d4; } .pied span { color: rgba(255, 255, 255, .6); }
.pied-note { font-size: 13px; color: rgba(255, 255, 255, .55); }

/* — mouvement — */
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes revele { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fond { to { opacity: 1; } }
@keyframes grandit { from { transform: scaleX(0); } }
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } svg.courbe .cur { stroke-dashoffset: 0; } svg.courbe .aire { opacity: 1; } }

/* — téléphone et tablette — */
@media (max-width: 1000px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trois { grid-template-columns: minmax(0, 1fr); } .barre-quand { margin-left: 0; }
}
@media (max-width: 720px) {
  .haut { flex-wrap: wrap; } .recherche { order: 3; flex-basis: 100%; max-width: none; } .tuiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .deux, .pied-in { grid-template-columns: minmax(0, 1fr); } .tuile { padding: 18px; }
}

/* — barre « Où / Quand » — */
.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 11px clamp(14px, 3vw, 36px); background: #fff; border-bottom: 1px solid var(--ligne); }
.barre-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.barre-quand { margin-left: auto; }
.barre-lib { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-d); margin-right: 2px; }
.sel { position: relative; display: block; min-width: 0; }
.sel select { appearance: none; -webkit-appearance: none; max-width: 200px; padding: 9px 34px 9px 14px; border: 1px solid var(--ligne); border-radius: 999px; background: #f6f8fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2366749a' stroke-width='2' stroke-linecap='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 13px center;
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-overflow: ellipsis; }
.sel select:hover:not(:disabled) { border-color: var(--teal); }
.sel select:focus-visible { outline: 3px solid rgba(18, 181, 166, .3); border-color: var(--teal); }
.sel select:disabled { opacity: .45; cursor: not-allowed; }
.sel-annee select { max-width: 120px; background-color: #fff; }
.sel-mois select { max-width: 150px; background-color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip-periode { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; }
.chip-periode:hover { background: var(--navy2); }
.bouton-barre { width: auto; margin: 0; padding: 9px 20px; }

/* — tiroir : réglette de période libre — */
.reglette-bloc { border: 1px solid var(--ligne); border-radius: 16px; padding: 10px 16px 14px; margin: 22px 0 8px; }
.reglette-bloc legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.reglette { position: relative; height: 34px; margin: 8px 2px 0; }
.reglette-piste { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: 999px; background: #e4e9f2; }
.reglette-plage { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #4be3a7, var(--teal)); border-radius: 999px; }
.reglette input[type=range] { position: absolute; left: 0; top: 5px; width: 100%; height: 24px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.reglette input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 24px; }
.reglette input[type=range]::-moz-range-track { background: transparent; height: 24px; }
.reglette input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #fff; border: 3px solid var(--teal); box-shadow: 0 2px 6px rgba(10, 31, 68, .25); cursor: grab; }
.reglette input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--teal); box-shadow: 0 2px 6px rgba(10, 31, 68, .25); cursor: grab; }
.reglette input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(18, 181, 166, .35); }
.reglette-lib { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-weight: 800; color: var(--navy); font-size: 15px; }
.reglette-fleche { color: var(--muted); font-weight: 600; }
.reglette-aide { margin: 10px 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.raccourci { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--teal-d); } .raccourci:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .barre { gap: 10px 14px; } .barre-bloc { width: 100%; } .barre-quand { margin-left: 0; }
  .barre-bloc .sel { flex: 1 1 calc(50% - 8px); } .barre-bloc .sel select { width: 100%; max-width: none; }
  .barre-bloc .sel-annee, .barre-bloc .sel-mois { flex: 0 0 auto; } .barre-bloc .sel-annee select, .barre-bloc .sel-mois select { width: auto; }
  .periodes { flex: 1 1 auto; } .periodes a { flex: 1; text-align: center; padding: 8px 6px; }
}

/* — bulles d'aide « ? » : les définitions ne s'étalent pas dans le tableau de bord — */
.aide { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.aide-bouton { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid #aab4cd; border-radius: 50%; background: #fff; color: #7280a3; font-size: 12px; font-weight: 800; line-height: 1; cursor: help; transition: .15s; }
.aide-bouton:hover, .aide-bouton:focus-visible, .aide.ouvert .aide-bouton { border-color: var(--teal); color: var(--teal-d); background: #effaf8; outline: none; }
.aide-bulle { position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%; width: min(340px, calc(100vw - 24px)); padding: 13px 16px; border-radius: 14px; background: var(--navy); color: #e8eefc;
  font-size: 13.5px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; box-shadow: 0 18px 40px -12px rgba(10, 31, 68, .55);
  display: none; transform: translateX(-50%); }
.aide-bulle b { color: #fff; }
.aide:hover .aide-bulle, .aide.ouvert .aide-bulle, .aide:focus-within .aide-bulle { display: block; animation: apparait .15s ease both; }
@keyframes apparait { from { opacity: 0; margin-top: -4px; } to { opacity: 1; margin-top: 0; } }
.aide-bulle::before { content: ""; position: absolute; top: -6px; left: var(--fleche, 50%); width: 12px; height: 12px; background: var(--navy); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
h2 .aide { font-size: 16px; } h2 .aide-bouton { width: 24px; height: 24px; font-size: 14px; }
.t-lib .aide { margin-left: 4px; }

/* — page « Comparer » — */
.affiner.comparer, .affiner.localiser { display: inline-flex; align-items: center; } .affiner.actif { background: var(--navy); color: #fff; border-color: var(--navy); }
.bouton-ajout { padding: 9px 18px; border-radius: 999px; background: var(--teal-d); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; } .bouton-ajout:hover { background: var(--teal); }
.aide-ajout { font-size: 13px; color: var(--muted); }
.sujets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sujet-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 14.5px; font-weight: 600; }
.sujet-chip i { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.sujet-chip small { color: rgba(255, 255, 255, .62); font-weight: 500; font-size: 12.5px; }
.sc-nom:hover { text-decoration: underline; }
.sc-x { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 11px; } .sc-x:hover { background: var(--coral); }
.defile { overflow-x: auto; }
table.comparatif { width: 100%; border-collapse: collapse; min-width: 660px; }
.comparatif th, .comparatif td { padding: 13px 14px; text-align: left; border-top: 1px solid var(--ligne); vertical-align: middle; }
.comparatif thead th { border-top: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; user-select: none; }
.comparatif thead th[data-tri] { cursor: pointer; } .comparatif thead th[data-tri]:hover { color: var(--teal-d); }
.comparatif thead th[data-ordre=desc]::after { content: " ▼"; } .comparatif thead th[data-ordre=asc]::after { content: " ▲"; }
.comparatif .num { text-align: right; font-variant-numeric: tabular-nums; }
.comparatif tbody th { position: sticky; left: 0; background: var(--carte); font-weight: 700; min-width: 190px; }
.comparatif tbody th i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: baseline; }
.comparatif td b { font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.comparatif td small, .comparatif th small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.comparatif td.meilleur { background: #effaf5; } .comparatif td.meilleur b { color: #08795b; }
.comparatif tr.peu { opacity: .62; }
.jauge { display: block; height: 6px; width: 96px; margin: 6px 0 0 auto; border-radius: 99px; background: #e9edf5; overflow: hidden; } .jauge i { display: block; height: 100%; background: var(--c); border-radius: inherit; }
.legende-sujets { gap: 8px 10px; margin-top: 12px; } .legende-sujets .lg-note { flex-basis: auto; }
.lg-sujet { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 10px; border: 1px solid var(--ligne); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.lg-sujet i { width: 20px; height: 4px; border-radius: 2px; background: var(--c); }
.lg-sujet:hover, .lg-sujet.actif { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
svg.multi .serie { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s, stroke-width .15s; }
svg.multi.focus .serie, svg.multi.focus .serie-pt { opacity: .12; } svg.multi.focus .serie.actif, svg.multi.focus .serie-pt.actif { opacity: 1; } svg.multi.focus .serie.actif { stroke-width: 4.6; }
svg.multi .pt-m { fill: transparent; stroke: none; } svg.multi .pt-m:hover { fill: var(--c); } svg.multi a .pt-m { cursor: pointer; }
/* Analyser : « Un mot dans le temps » (17/10/2026) */
.ngram-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.ngram-form input[type=text] { flex: 1 1 260px; min-width: 0; padding: 10px 14px; border: 1px solid var(--ligne); border-radius: 12px; font: inherit; background: #fff; }
.ngram-exemples { margin: 0; color: var(--muted); font-size: 14px; } .ngram-exemples a { color: var(--teal-d); font-weight: 600; }
.ngram-reglages { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; font-size: 13.5px; color: var(--muted); } .ngram-reglages .onglets { margin: 0; }
.ngram-groupe { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rp-corps[data-url] { min-height: 430px; } .rp-corps { transition: opacity .15s; } .rp-corps.charge { opacity: .5; }
.ngram-corps[data-url] { min-height: 430px; } .ngram-corps { transition: opacity .15s; } .ngram-corps.charge { opacity: .5; }          /* hauteur réservée : rien ne saute à l'arrivée du graphique */
.lg-croix { display: inline-block; margin-left: 8px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; color: var(--muted); font-size: 16px; font-weight: 700; } .lg-croix:hover, .lg-croix:focus-visible { background: var(--c); color: #fff; }
svg.multi .serie-pt-f { fill: #fff; stroke-width: 2; } svg.multi.focus .serie-pt-f { opacity: .12; } svg.multi.focus .serie-pt-f.actif { opacity: 1; }
.ngram-notes { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.lg-sujet small { margin-left: 6px; color: var(--muted); font-weight: 500; }
table.chaleur { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 4px; }
.chaleur thead th { padding: 6px 8px; max-width: 150px; font-size: 13px; font-weight: 700; text-align: center; vertical-align: bottom; }
.chaleur thead th span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chaleur tbody th { position: sticky; left: 0; z-index: 1; padding: 6px 12px 6px 4px; background: var(--carte); text-align: left; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.chaleur tbody th small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.chaleur td { min-width: 84px; padding: 0; border-radius: 10px; text-align: center; }
.chaleur td a { display: block; padding: 13px 6px; border-radius: 10px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); } .chaleur td a:hover { outline: 2px solid var(--navy); }
.chaleur td.bon { background: rgba(42, 111, 219, calc(var(--i) * .62 + .08)); } .chaleur td.mauvais { background: rgba(224, 112, 20, calc(var(--i) * .62 + .08)); } .chaleur td.neutre { background: #f1f4fa; }
.chaleur td a .fl { margin-left: 5px; font-size: 10px; opacity: .75; vertical-align: 1px; }
.chaleur td.bon a .fl { color: #1d4fa8; } .chaleur td.mauvais a .fl { color: #a44a0a; }
.chaleur-leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chaleur-leg i { display: inline-block; width: 22px; height: 12px; border-radius: 4px; margin-right: 7px; vertical-align: -1px; }
.chaleur-leg .bon i { background: rgba(42, 111, 219, .55); } .chaleur-leg .mauvais i { background: rgba(224, 112, 20, .55); } .chaleur-leg .neutre i { background: #e6ebf5; }
.chaleur td.sans { padding: 13px 6px; background: #f4f6fb; color: #b4bdd3; }
@media (max-width: 720px) { .bouton-ajout { flex: 1 1 100%; text-align: center; } .sujet-chip small { display: none; } }

/* — comparaison : l'an dernier, et chaque sujet avec ses propres thèmes — */
svg.multi .serie.prec { stroke-width: 2.2; stroke-dasharray: 3 7; opacity: .75; } svg.multi.focus .serie.prec { opacity: .1; } svg.multi.focus .serie.prec.actif { opacity: .95; stroke-width: 3; }
.bascule { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px 14px; padding: 7px 14px 7px 8px; border: 1px solid var(--ligne); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bascule i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #c9d1e3; transition: .15s; } .bascule i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
.bascule.oui i { background: var(--teal); } .bascule.oui i::after { left: 16px; } .bascule:hover { border-color: var(--teal); }
.comparatif .delta { margin-top: 5px; padding: 1px 8px; font-size: 11.5px; }
.cartes-sujets { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; }
.carte-sujet { flex: 0 0 min(310px, 86vw); scroll-snap-align: start; background: var(--carte); border-radius: var(--rayon); padding: 18px 22px 12px; box-shadow: var(--ombre); border-top: 5px solid var(--c); }
.carte-sujet h3 { display: flex; align-items: center; gap: 9px; font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; } .carte-sujet h3 i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.carte-sujet h4 { margin: 14px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #08795b; } .carte-sujet .irritants h4 { color: #c23a2b; }
.carte-sujet .ligne-theme { margin: 4px -8px 2px; padding: 4px 8px; } .carte-sujet .lt-tete { font-size: .95rem; } .carte-sujet .piste { height: 8px; margin: 5px 0 3px; }

/* — pastille de couleur par univers dans les classements de lieux — */
.pu { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--c); vertical-align: baseline; }
.legende-univers { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -8px 0 18px; font-size: 13px; }
.legende-univers a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; } .legende-univers a:hover { color: var(--ink); }
.legende-univers i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); }

/* — page principale en deux colonnes : la courbe et les mots en première impression — */
.page-grille { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 60px) clamp(14px, 3vw, 24px) 0; display: grid; gap: 22px; }
.rangee { display: grid; grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.bloc { min-width: 0; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 22px clamp(16px, 2vw, 28px) 20px; }
.bloc-tete { margin-bottom: 14px; } .bloc-tete h2 { max-width: none; margin: 4px 0 0; font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 800; }
.bloc .carte-large { padding: 0; background: none; box-shadow: none; }
.bloc .colonne { padding: 0; background: none; box-shadow: none; }
.bloc .deux { gap: 26px; }
.bloc .onglets { margin-bottom: 12px; }
.aide-ligne { margin-top: 10px; text-align: right; } .aide-ligne .aide { margin-left: 0; }
.onglets-defile { max-width: 100%; border-radius: 22px; } .onglets-defile .onglet { white-space: nowrap; padding: 7px 13px; font-size: 14px; }
.onglets-mots { display: flex; align-items: center; width: fit-content; max-width: 100%; border-radius: 999px; padding-right: 8px; } .onglets-mots .aide { margin-left: 6px; }
/* nuages (mots, lieux) */
.nuage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 16px; padding: 14px 4px 6px; line-height: 1.12; min-height: 250px; align-content: center; }
.mot { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 700; letter-spacing: -.01em; color: var(--c, var(--ink)); transition: transform .12s, opacity .12s; white-space: nowrap; }
.mot:hover { transform: scale(1.07); opacity: 1 !important; }
.nuage.loue .mot { --c: #0b8f84; } .nuage.fache .mot { --c: #d4452f; }
.mot.p1 { opacity: .6; font-weight: 600; } .mot.p2 { opacity: .78; } .mot.p3 { opacity: .92; } .mot.p4 { opacity: 1; font-weight: 800; }
.mot.expr { font-style: italic; }
.nuage-lieux { gap: 4px 14px; } .nuage-lieux .mot { color: var(--ink); } .nuage-lieux .mot .pu { width: .42em; height: .42em; margin-right: .3em; vertical-align: middle; }
.chargement { padding: 6px 0; } .squelette { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; padding: 26px 8px 8px; min-height: 230px; align-content: center; }
.squelette i { display: block; height: 22px; border-radius: 999px; background: linear-gradient(90deg, #eceff6 25%, #f6f8fc 50%, #eceff6 75%); background-size: 200% 100%; animation: scintille 1.4s linear infinite; }
.chargement-texte { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
@keyframes scintille { to { background-position: -200% 0; } }
.bloc .colonne.lieux .lieu:first-child { border-top: 0; }
/* avis cités : positifs et négatifs côte à côte */
.deux-avis { gap: 22px; align-items: start; }
.colonne-avis h3 { margin-bottom: 12px; font-size: 1.05rem; font-weight: 800; color: #08795b; } .colonne-avis.negatifs h3 { color: #c23a2b; }
.citations.pile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pile .citation { padding: 16px 18px 14px; gap: 10px; box-shadow: none; background: #f8faff; } .pile .citation blockquote { font-size: 14.5px; line-height: 1.5; } .pile .citation blockquote::before { font-size: 34px; }
@media (max-width: 1000px) { .rangee { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .bloc .deux, .deux-avis { grid-template-columns: minmax(0, 1fr); } .nuage { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .squelette i { animation: none; } }

.nuage-lieux { min-height: 200px; }

/* — page « Localiser » : la carte et ses couches d'opinion — */
.rangee-carte { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }
.legende-couche[hidden] { display: none; }
.carte-cadre { border-radius: 18px; overflow: hidden; }
.carte-svg { display: block; width: 100%; height: auto; }
.carte-fond { fill: #f3f6fb; } .carte-grille { stroke: #e2e8f3; stroke-width: 1; }
.carte-commune { font: 700 13px "Inter", system-ui, sans-serif; fill: #5b6a8c; paint-order: stroke; stroke: #f3f6fb; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.pt-carte { stroke: #fff; stroke-width: 1; opacity: .93; transition: stroke .1s; cursor: pointer; } .pt-carte:hover { stroke: #0a1f44; stroke-width: 2.4; opacity: 1; }
.couches { display: grid; gap: 8px; }
.couche { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border: 1px solid var(--ligne); border-radius: 14px; cursor: pointer; font-weight: 700; transition: .12s; }
.couche:hover { border-color: var(--teal); } .couche:has(input:checked) { border-color: var(--teal); background: #effaf8; box-shadow: 0 0 0 3px rgba(18, 181, 166, .14); }
.couche input { margin-top: 4px; accent-color: var(--teal-d); } .couche small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.legendes-couches { margin-top: 18px; }
.degrade { height: 12px; border-radius: 999px; } .degrade-lib { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.legende-puces { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink); font-weight: 600; }
.legende-puces i, .legende-gris i { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; background: var(--c, #c9d1e3); }
.legende-gris { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1000px) { .rangee-carte { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .couches { grid-template-columns: 1fr 1fr; } .couche { padding: 9px 11px; gap: 9px; } .couche small { display: none; } }

/* — carte : zoom, déplacement, boutons, échelle qui suit le zoom — */
.carte-cadre { position: relative; }
.carte-svg { touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } .carte-svg.glisse { cursor: grabbing; }
.carte-grille, .pt-carte { vector-effect: non-scaling-stroke; }
.carte-outils { position: absolute; top: 12px; right: 12px; display: grid; gap: 6px; }
.carte-bouton { font: 700 13px "Inter", system-ui, sans-serif; color: var(--navy); background: rgba(255, 255, 255, .94); border: 1px solid var(--ligne); border-radius: 10px; padding: 7px 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(10, 31, 68, .1); transition: .12s; }
.carte-bouton:hover { border-color: var(--teal); color: var(--teal-d); } .carte-bouton:focus-visible { outline: 3px solid rgba(18, 181, 166, .4); outline-offset: 1px; }
.carte-carre { width: 38px; height: 38px; padding: 0; font-size: 20px; line-height: 1; }
.carte-bas { position: absolute; left: 14px; right: 12px; bottom: 10px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; pointer-events: none; }
.carte-bas > * { pointer-events: auto; }
.carte-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.carte-echelle-html { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; color: #5b6a8c; text-shadow: 0 0 4px #f3f6fb, 0 0 4px #f3f6fb; }
#echelle-trait { display: block; height: 0; border-bottom: 2px solid #66749a; }

.lt-ref { display: block; }

/* — filtres actifs : une pastille bien visible, avec une croix pour la retirer — */
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 4px; }
.fa-lib { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #ffd9a0; }
.filtre-pastille { display: inline-flex; align-items: center; gap: 8px; background: var(--sun); color: var(--navy); border-radius: 999px; padding: 4px 5px 4px 15px; font-size: 14.5px; box-shadow: 0 3px 14px rgba(255, 179, 71, .38); }
.filtre-pastille b { font-weight: 800; }
.filtre-pastille a { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(10, 31, 68, .14); color: var(--navy); font-size: 12px; line-height: 1; transition: .12s; }
.filtre-pastille a:hover, .filtre-pastille a:focus-visible { background: var(--navy); color: #fff; }
.fa-tout { color: #fff; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; opacity: .85; } .fa-tout:hover { opacity: 1; }
.affiner.avec-filtre { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(255, 179, 71, .28); }
.badge-filtre { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: var(--sun); color: var(--navy); font-size: 12px; font-weight: 800; }

/* — la barre des boutons d'en-tête et la grille pleine largeur — */
.affiner.analyser { display: inline-flex; align-items: center; }
.rangee-pleine { grid-template-columns: minmax(0, 1fr); }

/* — tendance long terme — */
svg.courbe .cur.pale { stroke-dasharray: 7 6; stroke-dashoffset: 0; stroke-width: 3; opacity: .65; animation: none; }   /* peu d'avis sur 12 mois : lecture fragile */
svg.courbe .iso { fill: var(--teal); } svg.courbe .iso.pale { opacity: .55; }
svg.courbe .gr.an { stroke: #e3e8f2; stroke-dasharray: 3 4; }
svg.courbe .fin { fill: #fff; stroke: var(--teal-d); stroke-width: 3; }

/* — page principale : ressentis et mots — */
.ress-bande { display: flex; gap: 2px; height: 16px; border-radius: 999px; overflow: hidden; margin: 4px 0 12px; }
.rs-seg { display: block; min-width: 3px; transition: opacity .12s, transform .12s; } .rs-seg:hover { opacity: .8; }
.ress-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13.5px; }
.ress-leg a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; } .ress-leg a:hover { color: var(--teal-d); }
.ress-leg i, .sentiment-leg i, .ress-nom i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; }
.ress-leg b { color: var(--muted); font-weight: 700; }
.lien-analyse { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--teal-d); } .lien-analyse:hover { color: var(--navy); }


/* — page « Analyser » : colonne d'analyses et panneau de verbatims à côté — */
.analyse-grille { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.analyse-colonne { display: grid; gap: 22px; min-width: 0; }
.analyse-panneau { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow: auto; }
@media (max-width: 1000px) { .analyse-grille { grid-template-columns: minmax(0, 1fr); } .analyse-panneau { position: static; max-height: none; } }
.graphe-svg { display: block; width: 100%; height: auto; }
.g-lien { stroke: #b4c0da; opacity: .6; fill: none; transition: opacity .15s, stroke .15s; }
.g-noeud { cursor: pointer; } .g-noeud circle { fill: var(--teal); stroke: #fff; stroke-width: 2.5; transition: opacity .15s; } .g-noeud.negatif circle { fill: var(--coral); }
.g-noeud text { font: 700 13px "Inter", system-ui, sans-serif; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.g-noeud { transition: opacity .15s; }
.graphe-svg.survol .g-noeud { opacity: .22; } .graphe-svg.survol .g-noeud.actif, .graphe-svg.survol .g-noeud.voisin { opacity: 1; }
.graphe-svg.survol .g-lien { opacity: .07; } .graphe-svg.survol .g-lien.actif { opacity: .95; stroke: #3a4a75; }
.g-noeud.choisi circle { stroke: var(--navy); stroke-width: 3.5; }
.legende-graphe { gap: 6px 18px; margin-top: 8px; } .legende-graphe .lg-note { flex-basis: 100%; }
.g-pastille { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; } .g-pastille.pos { background: var(--teal); } .g-pastille.neg { background: var(--coral); }

.sentiment { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.anneau .an-val { font: 800 17px "Inter", system-ui, sans-serif; fill: var(--navy); } .anneau .an-lib { font: 600 7px "Inter", system-ui, sans-serif; fill: var(--muted); }
.sentiment-leg { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sentiment-leg a, .sentiment-leg span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); } .sentiment-leg a:hover { color: var(--teal-d); } .sentiment-leg small { color: var(--muted); font-weight: 500; }
.ress-barres { display: grid; gap: 2px; }
.ress-ligne { display: grid; grid-template-columns: 112px minmax(0, 1fr) 56px; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px; transition: background .12s; } .ress-ligne:hover, .ress-ligne.choisi { background: #f1f5fb; }
.ress-nom { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.ress-piste { display: block; height: 12px; border-radius: 999px; background: #eef2f9; overflow: hidden; } .ress-piste span { display: block; height: 100%; border-radius: 999px; }
.ress-ligne b { text-align: right; font-size: 14px; }

.theme-intro { margin: 2px 0 10px; font-size: 13.5px; color: var(--muted); }
.themes-liste { display: grid; gap: 2px; }
.theme-ligne { display: grid; gap: 5px; padding: 9px 10px; border-radius: 12px; transition: background .12s; } .theme-ligne:hover, .theme-ligne.choisi { background: #f1f5fb; }
.tl-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .tl-haut b { font-size: 15px; } .tl-haut small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.tl-barre { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #eef2f9; } .tl-barre i { display: block; height: 100%; } .tl-barre .pos { background: var(--teal); } .tl-barre .neu { background: #d5dbea; } .tl-barre .neg { background: var(--coral); }
.tl-bas { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; } .tl-bas .v { color: #0b8f84; } .tl-bas .r { color: #d4452f; }
.tl-bas em { margin-left: auto; font-style: normal; font-weight: 700; } .tl-bas em.ecart-haut { color: #0b8f84; } .tl-bas em.ecart-bas { color: #d4452f; }

.ex-titre { margin: 0 0 12px; display: grid; gap: 2px; } .ex-titre b { font-size: 15.5px; } .ex-titre span { font-size: 13px; color: var(--muted); }
.extraits { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 0; }
.extraits .citation { padding: 18px 18px 14px; gap: 10px; border-radius: 16px; } .extraits .citation blockquote { font-size: 14.5px; }
.bouton-lire { display: inline-block; margin-top: 14px; padding: 10px 18px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; } .bouton-lire:hover { background: var(--navy2); }
.extraits-corps.charge { opacity: .45; transition: opacity .15s; }
[data-extrait].choisi { outline: 0; }

svg.courbe.longue .pt-m { fill: transparent; stroke: none; cursor: crosshair; } svg.courbe.longue .pt-m:hover { fill: var(--teal-d); stroke: #fff; stroke-width: 2; }

/* — le type de lieu à côté de chaque thème (hébergement, restauration, visites et loisirs) — */
.type-lieu { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: #eef2f9; color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 700; letter-spacing: .01em; vertical-align: 2px; white-space: nowrap; }
.chip small { color: var(--muted); font-size: 12px; font-weight: 600; }

/* — nuages de mots à l'allure classique (mêmes polices que le reste) : mots serrés, nuances de la couleur du ton, quelques mots couchés — */
.nuage.loue, .nuage.fache { gap: 0 .85rem; line-height: 1; }
.nuage.loue .mot, .nuage.fache .mot { padding: 0 .04em .06em; font-weight: 800; letter-spacing: -.025em; line-height: .98; border: 0; background: none; border-radius: 0; }
.nuage.loue .mot.t0 { --c: #0b8f84; } .nuage.loue .mot.t1 { --c: #12b5a6; } .nuage.loue .mot.t2 { --c: #08795b; } .nuage.loue .mot.t3 { --c: #2476a8; }
.nuage.fache .mot.t0 { --c: #d4452f; } .nuage.fache .mot.t1 { --c: #ff6b5a; } .nuage.fache .mot.t2 { --c: #b83225; } .nuage.fache .mot.t3 { --c: #e0701f; }
.nuage .mot.p1 { font-weight: 700; opacity: .85; }
.nuage.mini { min-height: 190px; padding: 6px 2px 2px; }
.nuages-mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 30px; }
.nm h3 { margin: 0 0 2px; font-size: 14px; font-weight: 800; letter-spacing: .02em; } .nm.loue h3 { color: #0b8f84; } .nm.fache h3 { color: #d4452f; }
@media (max-width: 700px) { .nuages-mini { grid-template-columns: minmax(0, 1fr); } }
/* — mots qui distinguent chaque sujet (Comparer) : bleu = ressort ici, orange = ressort plutôt chez les autres (lisible par les daltoniens) — */
.cartes-mots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr)); gap: 22px; }
.carte-mots { min-width: 0; background: var(--carte); border-radius: var(--rayon); padding: 20px 26px 18px; box-shadow: var(--ombre); border-top: 5px solid var(--c); }
.carte-mots h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; }
.carte-mots h3 i { flex: none; align-self: center; width: 13px; height: 13px; border-radius: 50%; background: var(--c); }
.carte-mots h3 small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.carte-mots h4 { margin: 16px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.carte-mots h4.h-ici { color: #1c3f94; } .carte-mots h4.h-ailleurs { color: #c25a12; }
.carte-mots .vide { margin: 8px 0 10px; font-size: 14px; color: var(--muted); }
.carte-mots .nuage { min-height: 0; padding: 8px 0 6px; gap: .12rem 1rem; line-height: 1.12; align-content: flex-start; }
.carte-mots .mot { overflow: visible; max-width: none; padding: .04em .02em .08em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.nuage.ici .mot.t0 { --c: #1c3f94; } .nuage.ici .mot.t1 { --c: #2476a8; } .nuage.ici .mot.t2 { --c: #123a82; } .nuage.ici .mot.t3 { --c: #00a3e0; }
.nuage.ailleurs .mot.t0 { --c: #e0701f; } .nuage.ailleurs .mot.t1 { --c: #ff8a3d; } .nuage.ailleurs .mot.t2 { --c: #c25a12; } .nuage.ailleurs .mot.t3 { --c: #d9822b; }
.bloc-visiteurs .ress-bande { height: 18px; }

.rangee-egale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .rangee-egale { grid-template-columns: minmax(0, 1fr); } }

.onglets-nature { margin: 0 0 8px; } .onglets-nature .onglet { white-space: nowrap; }

/* — fond de carte (tuiles du plan IGN, adoucies) : le quadrillage s'efface dès que le fond est là — */
.carte-svg.fond-ok .carte-grille { opacity: 0; }
.carte-attribution { position: absolute; left: 12px; top: 10px; padding: 1px 8px; border-radius: 8px; background: rgba(255, 255, 255, .72); color: #5b6a8c; font-size: 11px; font-weight: 600; pointer-events: none; }
.carte-svg .pt-carte { stroke-width: 1.4; }

/* — retour depuis la fiche d'un lieu, et fil d'Ariane cliquable — */
.bouton-retour { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--navy); font-weight: 700; font-size: 15px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); transition: .12s; }
.bouton-retour:hover { background: #fff; color: var(--teal-d); transform: translateX(-2px); }
.chemin a { color: inherit; } .chemin a:hover, .chemin a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.chemin a:not(:last-child)::after { content: "›"; margin-left: 8px; opacity: .6; display: inline-block; text-decoration: none; }

/* — export discret (Excel, image PNG) sur chaque bloc — */
[data-export] { position: relative; }
.export { position: absolute; top: 10px; right: 10px; z-index: 6; }
.tuiles[data-export] .export { top: -8px; right: clamp(14px, 3vw, 24px); }
.export-bouton { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .94); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; opacity: .5; transition: .15s; }
[data-export]:hover > .export .export-bouton, .export-bouton:focus-visible, .export-bouton[aria-expanded=true] { opacity: 1; border-color: var(--teal); color: var(--teal-d); }
.export-bouton:disabled { cursor: progress; }
.export-menu { position: absolute; right: 0; top: 36px; min-width: 178px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff; box-shadow: var(--ombre); }
.export-menu[hidden] { display: none; }
.export-menu a, .export-menu button { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: none; text-align: left; font: 600 14px "Inter", system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.export-menu a:hover, .export-menu button:hover, .export-menu a:focus-visible, .export-menu button:focus-visible { background: #f1f5fb; color: var(--teal-d); outline: 0; }
@media print { .export { display: none; } }

.lt-tete > b { white-space: nowrap; }

/* — bandeau discret : la source des données (Google Maps aujourd'hui ; les données du client, sur devis) — */
.bandeau-source { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 5px clamp(14px, 3vw, 36px); background: #eef2f9; border-bottom: 1px solid var(--ligne); font-size: 12px; color: var(--muted); }
.bs-lib { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.source { display: inline-flex; gap: 4px; }
.source > span { padding: 2px 11px; border-radius: 999px; font-weight: 700; }
.source-actif { background: #fff; color: var(--navy); border: 1px solid var(--teal); }
.source-actif::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--teal); vertical-align: 1px; }
.source-futur { border: 1px dashed #b8c2d8; color: #8a96b5; cursor: default; user-select: none; }
@media (max-width: 720px) { .bandeau-source { justify-content: space-between; } .bs-lib { display: none; } }
@media print { .bandeau-source { display: none; } }

/* — Expert IA : bilan de saison par chapitres (CAHIER_DES_CHARGES_IA.md) — */
.etiquette-test { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.expert-intro { max-width: 900px; margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.expert-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 22px; align-items: start; }
.expert-carte .bloc-tete h2 { margin-bottom: 4px; } .expert-question { margin: 0; color: var(--muted); font-size: 15px; }
.expert-depliant > summary { cursor: pointer; list-style: none; display: grid; gap: 2px; padding: 2px 0 10px; } .expert-depliant > summary::-webkit-details-marker { display: none; }
.expert-depliant > summary .expert-titre { font-size: 21px; font-weight: 800; color: var(--navy); } .expert-depliant > summary .expert-question { display: block; }
.expert-depliant > summary::after { content: "Afficher ▾"; justify-self: start; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--teal-d); } .expert-depliant[open] > summary::after { content: "Replier ▴"; }
.expert-interne { border-left: 3px solid #e0a15a; padding-left: 10px; background: #fff8ef; border-radius: 0 10px 10px 0; } .expert-groupe { color: var(--muted); font-size: 13px; }
.expert-outils { display: flex; justify-content: flex-end; margin: 4px 0 10px; } .expert-modele { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.expert-modele select { border: 1px solid #d6deec; border-radius: 10px; padding: 5px 8px; background: #fff; font-size: 13px; color: var(--ink); }
.expert-texte p { margin: 0 0 12px; line-height: 1.55; font-size: 16px; color: var(--ink); }
.expert-actions { margin: 4px 0 14px; } .bouton-discret { padding: 7px 16px; border-radius: 999px; border: 1px solid #c9d6ec; background: #fff; color: var(--navy); font-weight: 700; font-size: 13px; cursor: pointer; } .bouton-discret:hover { background: #f1f6fc; }
.expert-chapitre h4 { margin: 14px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .h-fort { color: #08795b; } .h-vigilance { color: #c25a12; }
.expert-texte .expert-rubrique { margin: 18px 0 6px; font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink); } .expert-texte .expert-rubrique:first-child { margin-top: 0; }
.expert-puces { list-style: none; margin: 0 0 10px; padding: 0; } .expert-puces li { padding-left: 14px; text-indent: -14px; margin: 5px 0; line-height: 1.5; font-size: 15px; color: var(--ink); }
.expert-liste { margin: 0 0 8px; padding-left: 20px; } .expert-liste li { margin: 3px 0; line-height: 1.45; font-size: 15px; }
.expert-details { margin: 10px 0; font-size: 14px; } .expert-details summary { cursor: pointer; color: var(--teal-d); font-weight: 700; }
.expert-faits { margin: 8px 0 0; padding: 12px 14px; background: #f3f6fb; border-radius: 12px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-x: auto; max-height: 420px; overflow-y: auto; }
.expert-avis { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.45; } .expert-avis li { margin: 6px 0; }
.expert-pied { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); } .expert-avert { color: #c25a12; }
.expert-vide { margin: 4px 0 8px; color: var(--muted); } .expert-erreur { padding: 12px 14px; border-radius: 12px; background: #fdeeea; color: #8a2b1b; font-size: 14px; line-height: 1.45; }
.expert-avenir { margin: 22px 0 0; color: var(--muted); font-size: 14px; }

/* — « La semaine en bref » (idée de Charles, 12/10/2026) : bloc en largeur sous les grosses tuiles de l'accueil — */
.semaine-cadre { max-width: 1180px; margin: 18px auto 0; padding: 0 clamp(14px, 3vw, 24px); }
.semaine { position: relative; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); border-left: 6px solid var(--teal); padding: 16px clamp(16px, 2vw, 26px) 14px; }
.semaine.sem-vigilance { border-left-color: var(--sun); } .semaine.sem-alerte { border-left-color: var(--coral); }
.semaine-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }
.semaine-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .semaine-dates { color: var(--muted); font-size: 14px; }
.sem-badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #e3f6f3; color: #0b6b62; }
.sem-badge.vigilance { background: #fff1d8; color: #8a5a00; } .sem-badge.alerte { background: #fde4e0; color: #9b2a1c; }
.semaine-reglage { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.interrupteur { position: relative; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: #c5cde0; cursor: pointer; transition: background .15s; flex: none; }
.interrupteur .curseur { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 31, 68, .3); transition: transform .15s; }
.interrupteur.on { background: var(--teal-d); } .interrupteur.on .curseur { transform: translateX(16px); } .interrupteur:disabled { opacity: .5; cursor: wait; }
.semaine-puces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; margin: 12px 0 6px; }
.sem-puce .sp-lib { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .sem-puce .sp-val { font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1.15; }
.sem-puce .sp-detail { font-size: 12.5px; color: var(--muted); }
.semaine-texte { margin: 8px 0 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink); max-width: 112ch; }
.semaine-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.sem-chip { padding: 3px 10px; border-radius: 999px; font-size: 13px; background: #e3f6f3; color: #0b6b62; } .sem-chip.vigilance { background: #fff1d8; color: #8a5a00; }
.semaine-interne { margin: 8px 0 0; font-size: 13.5px; } .semaine-interne summary { cursor: pointer; color: var(--navy2); font-weight: 600; } .semaine-interne ul { margin: 6px 0 0; padding-left: 18px; } .semaine-interne li { margin: 4px 0; }
.semaine-ancien { margin: 8px 0 0; font-size: 13px; color: #c25a12; }
.semaine-pied { margin: 8px 0 0; font-size: 12px; color: var(--muted); } .semaine-vide { margin: 10px 0 2px; color: var(--muted); font-size: 14px; } .semaine-regen { margin: 4px 0 0; }
@media (max-width: 760px) { .semaine-puces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zone-info { margin: 4px 0 8px; color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.chip-zone { padding: 8px 13px; } .barre select[name=zone] { max-width: 260px; }       /* le menu des zones montre le nom en entier ; la croix seule la retire */
/* — communes d'une zone : cochées par défaut, un clic les décoche (17/10/2026) — */
.zone-communes { margin: 6px 0 10px; } .zone-communes > summary { cursor: pointer; color: rgba(255, 255, 255, .82); font-size: 14.5px; list-style: none; } .zone-communes > summary::-webkit-details-marker { display: none; }
.zone-communes > summary::before { content: "▸ "; } .zone-communes[open] > summary::before { content: "▾ "; } .zone-communes > summary small { margin-left: 8px; opacity: .8; }
.zc-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; max-width: 980px; }
.zc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 14px; font-weight: 600; border: 1px solid transparent; } .zc-chip small { font-weight: 500; opacity: .65; }
a.zc-chip:hover { border-color: var(--teal); } .zc-chip.exclue { background: transparent; color: rgba(255, 255, 255, .7); border: 1px dashed rgba(255, 255, 255, .55); text-decoration: line-through; } .zc-chip.derniere { opacity: .85; cursor: default; }
.zc-action { display: inline-flex; align-items: center; padding: 6px 4px; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: #fff; } .zc-comparer { margin-left: 8px; }
/* — accès par compte (17/10/2026) : nom du compte, « voir comme » (version administrateur), connexion, refus — */
.bs-compte { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; } .bs-nom { font-weight: 800; color: var(--navy); }
.bs-compte form { display: inline; margin: 0; } .bs-lien { border: 0; background: none; color: var(--teal-d); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; font-size: 13px; }
.bs-comme { position: relative; } .bs-comme > summary { cursor: pointer; font-weight: 700; color: var(--teal-d); list-style: none; } .bs-comme > summary::-webkit-details-marker { display: none; }
.bs-comme-liste { position: absolute; right: 0; top: 26px; z-index: 40; display: flex; flex-direction: column; min-width: 190px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 10px 34px rgba(18, 40, 90, .18); }
.bs-comme-liste a { padding: 8px 12px; border-radius: 9px; color: var(--navy); font-weight: 600; } .bs-comme-liste a:hover { background: #eef2f9; } .bs-comme-liste small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.bandeau-comme { padding: 8px clamp(14px, 3vw, 36px); background: var(--sun, #ffb347); color: var(--navy); font-size: 14px; text-align: center; } .bandeau-comme a { margin-left: 14px; font-weight: 800; text-decoration: underline; color: var(--navy); }
body.page-connexion { min-height: 100vh; background: linear-gradient(135deg, #0b1f4d, #17608f); display: grid; place-items: center; padding: 24px; }
.carte-connexion { width: min(100%, 400px); padding: 34px 32px 30px; border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); text-align: center; }
.carte-connexion h1 { margin: 10px 0 6px; font-size: 1.7rem; } .carte-connexion h1 b { color: var(--teal-d); } .connexion-logo { display: block; margin: 0 auto; }
.connexion-sous { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.connexion-alerte { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #fdecea; color: #a1281c; font-size: 14.5px; font-weight: 600; }
.carte-connexion form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .carte-connexion label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.carte-connexion input[type=text], .carte-connexion input[type=password] { padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 12px; font: inherit; }
.carte-connexion .bouton, .bouton-lien-plein { display: inline-block; width: 100%; margin-top: 4px; padding: 13px; border-radius: 14px; text-align: center; }