/* Carte des régions et des loyers, façon carte de navigation (macro carte_loyers d'elements.html, carte.js).
   Une section pleine largeur sur le lagon animé ; la carte à gauche (colonne souple), les onglets et la fiche à droite (colonne de largeur fixe) ;
   toutes les fiches sont empilées dans la même case, le panneau prend la hauteur de la plus grande : rien ne bouge au changement. */

/* toutes les valeurs réglables de la carte (panneau de réglage de /nouveau/carte-loyers/, reglages.js) ; réglages de Julien du 04/11 */
.ck-sec {
  --ck-fond-haut: #e8f4fd; --ck-fond-bas: #bfe3f6; --ck-largeur-fiche: 460px; --ck-largeur-carte: 470px;
  --ck-grille-couleur: #0f2a3d; --ck-grille-taille: 58px; --ck-grille-opacite: .04; --ck-reperes-opacite: .45; --ck-rose-opacite: .8;
  --ck-sable-clair: #fdf2ea; --ck-sable-fonce: #fdffdf; --ck-region-bord: #d5bf8f; --ck-region-on-clair: #5fe0a8; --ck-region-on-fonce: #159753;
  --ck-lagon: #5ff0e0; --ck-lagon-opacite: .95; --ck-cote: #ffffff; --ck-cote-epaisseur: 2.6px; --ck-recif: #ffffff; --ck-ombre-ile: .45;
  --ck-ville: #ffffff; --ck-ville-bord: #1c7db3; --ck-ville-on: #fde68a; --ck-ville-taille: 6px; --ck-nom: #0f2a3d; --ck-nom-taille: 14px;
  --ck-sillage: #fde68a; --ck-avion: #ffffff; --ck-avion-vitesse: 1; --ck-ronde: 5;
  --ck-onglet-on-a: #28a3e6; --ck-onglet-on-b: #1c7db3; --ck-fiche-fond: #ffffff; --ck-fiche-opacite: .95; --ck-loyer-a: #28a3e6; --ck-loyer-b: #1c7db3;
  position: relative; isolation: isolate; overflow: hidden; padding: 54px 0 46px; color: var(--ink);
  background: linear-gradient(180deg, var(--ck-fond-haut), var(--ck-fond-bas)); }   /* sous le lagon animé (et à sa place s'il ne peut pas être dessiné) */
.ck-titre { padding: 56px 0 34px; }
.ck-titre .tt { margin-bottom: 0; }
/* fond : le lagon animé du site (shader de accueil.js, data-lagon="site" + data-lagon-reglages), qui ne tourne que quand la section est à l'écran */
.ck-sec > .lagoon-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; pointer-events: none; }
/* grille des latitudes et longitudes, qui dérive très lentement */
.ck-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --g: color-mix(in srgb, var(--ck-grille-couleur) calc(var(--ck-grille-opacite) * 100%), transparent);
  background-image: linear-gradient(var(--g) 1px, transparent 1px), linear-gradient(90deg, var(--g) 1px, transparent 1px);
  background-size: var(--ck-grille-taille) var(--ck-grille-taille); animation: ck-grille 60s linear infinite; }
@keyframes ck-grille { to { background-position: var(--ck-grille-taille) var(--ck-grille-taille); } }
/* la grille du contenu : la carte à gauche (souple), les onglets et la fiche à droite (largeur fixe) */
.ck { display: grid; grid-template-columns: minmax(0, 1fr) var(--ck-largeur-fiche); grid-template-areas: "carte onglets" "carte fiches" "note note";
  grid-template-rows: auto 1fr auto; gap: 16px 40px; }
.ck-coord { position: absolute; z-index: 0; font: 600 11px/1 ui-monospace, "Consolas", monospace; letter-spacing: .08em; color: var(--ck-grille-couleur); opacity: var(--ck-reperes-opacite); pointer-events: none; }
.ck-coord.n { top: 18px; left: 18%; } .ck-coord.s { bottom: 16px; right: 18%; }
.ck-coord.o { left: 14px; top: 45%; writing-mode: vertical-rl; rotate: 180deg; } .ck-coord.e { right: 14px; top: 45%; writing-mode: vertical-rl; }
.ck-rose { position: absolute; z-index: 0; left: 4%; bottom: 60px; width: 70px; height: 70px; overflow: visible; opacity: var(--ck-rose-opacite); animation: ck-rose 40s ease-in-out infinite; }
.ck-rose circle { fill: none; stroke: rgb(15 42 61 / .3); stroke-width: 1; } .ck-rose circle.f { stroke-dasharray: 2 3; }
.ck-rose path { fill: rgb(15 42 61 / .45); } .ck-rose path.p { fill: var(--b1); } .ck-rose path.f2 { fill: rgb(15 42 61 / .22); }
.ck-rose text { font: 800 10px "Poppins", sans-serif; fill: var(--b1); text-anchor: middle; }
@keyframes ck-rose { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }

/* ---------- la carte ---------- */
.ck-carte { grid-area: carte; position: relative; z-index: 1; align-self: center; justify-self: center; width: 100%; max-width: var(--ck-largeur-carte); }
.ck-ile { display: block; width: 100%; height: auto; overflow: visible; }
.ck-halo { fill: url(#ck-lagon); stroke: none; opacity: var(--ck-lagon-opacite); transform-box: fill-box; transform-origin: center; animation: ck-respire 7s ease-in-out infinite; }
@keyframes ck-respire { 50% { opacity: 1; transform: scale(1.025); } }
.ck-recif { fill: none; stroke: var(--ck-recif); stroke-width: 1.8; stroke-dasharray: 1 6; stroke-linecap: round; }
.ck-ilots { fill: url(#ck-sable); stroke: none; }
.ck-reg { fill: url(#ck-sable); stroke: var(--ck-region-bord); stroke-width: 1.2; stroke-dasharray: 4 3; stroke-linejoin: round; cursor: pointer; outline: none; transition: fill .5s, stroke .5s; }
.ck-reg:hover { filter: brightness(1.03); }
.ck-reg.on { fill: url(#ck-vert); stroke: #fff; stroke-dasharray: none; stroke-width: 2; }
.ck-cote { fill: none; stroke: var(--ck-cote); stroke-width: var(--ck-cote-epaisseur); stroke-linejoin: round; pointer-events: none; }
.ck-rnoms text { font: 800 14px "Poppins", sans-serif; letter-spacing: .16em; text-anchor: middle; pointer-events: none; fill: #fff; opacity: 0; transition: opacity .4s; }
.ck-rnoms { display: none; }   /* les onglets et la région en vert suffisent ; les noms gênaient ceux des villes */

/* villes : point blanc cerclé de bleu ; celles de la région choisie montrent leur nom (cliquable comme le point) */
.ck-lieu { cursor: pointer; outline: none; }
.ck-lieu .pt { r: var(--ck-ville-taille); fill: var(--ck-ville); stroke: var(--ck-ville-bord); stroke-width: 3; transition: r .35s var(--rebond), fill .3s, stroke .3s; }
.ck-lieu:not(.vis) .pt { r: calc(var(--ck-ville-taille) * .67); stroke-width: 2.2; }
.ck-lieu .halo { fill: var(--ck-ville-on); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ck-lieu text { font: 700 var(--ck-nom-taille) "Poppins", sans-serif; fill: var(--ck-nom); paint-order: stroke; stroke: #fff; stroke-width: 4.5px; stroke-linejoin: round; opacity: 0; transition: opacity .35s; pointer-events: none; }
.ck-lieu.vis text, .ck-lieu:hover text, .ck-lieu:focus-visible text { opacity: 1; }
.ck-lieu.vis text { pointer-events: auto; }
.ck-lieu.on .pt { fill: var(--ck-ville-on); stroke: var(--ink); r: calc(var(--ck-ville-taille) * 1.25); }
.ck-lieu.on .halo { animation: ck-halo 1.8s ease-out infinite; }
.ck-lieu.on text { font-size: calc(var(--ck-nom-taille) * 1.1); fill: var(--ck-ville-bord); }
@keyframes ck-halo { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2); opacity: 0; } }

/* l'avion et son sillage en pointillé */
.ck-sillage { fill: none; stroke: var(--ck-sillage); stroke-width: 2.4; stroke-linecap: round; opacity: 0; pointer-events: none; }
.ck-sillage.vol { opacity: .95; } .ck-sillage.fin { opacity: 0; transition: opacity 1.2s .5s; }
.ck-avion { pointer-events: none; opacity: 0; transition: opacity .3s; }
.ck-avion.vole { opacity: 1; }   /* visible pendant le vol seulement : posé, il cachait le nom des villes */
.ck-avion path { fill: var(--ck-avion); stroke: var(--b1); stroke-width: 1.2; filter: drop-shadow(0 4px 4px rgb(2 26 44 / .45)); }

/* entrée : la côte se dessine, les villes tombent, l'avion apparaît */
.js .ck .ck-cote { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ck .ck-lieu { opacity: 0; }
.ck.vu .ck-cote { animation: ck-trace 1.8s cubic-bezier(.55, .1, .35, 1) forwards; }
.ck.vu .ck-lieu { animation: ck-tombe .6s var(--rebond) calc(1s + var(--i, 0) * .03s) both; }
@keyframes ck-trace { to { stroke-dashoffset: 0; } }
@keyframes ck-tombe { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }

/* ---------- onglets et fiche (colonne de largeur fixe) ---------- */
.ck-onglets { grid-area: onglets; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }
.ck-onglets button { all: unset; cursor: pointer; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink);
  background: rgb(255 255 255 / .75); border: 1px solid rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 18px -12px rgb(15 42 61 / .5); transition: background .3s, color .3s, transform .3s var(--courbe); }
.ck-onglets button:hover { background: #fff; transform: translateY(-2px); }
.ck-onglets button:focus-visible { outline: 2px solid var(--b1); outline-offset: 2px; }
.ck-onglets button[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--ck-onglet-on-a), var(--ck-onglet-on-b)); border-color: transparent; }

.ck-fiches { grid-area: fiches; position: relative; z-index: 1; display: grid; }
.ck-fiche { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 20px 22px 18px; border-radius: 22px; color: var(--ink);
  background: color-mix(in srgb, var(--ck-fiche-fond) calc(var(--ck-fiche-opacite) * 100%), transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 30px 60px -30px rgb(15 42 61 / .6);
  visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--courbe), visibility 0s .4s; }
.ck-fiche.on { visibility: visible; opacity: 1; transform: none; transition: opacity .4s .1s, transform .4s var(--courbe) .1s, visibility 0s; }
.ck-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.ck-tete h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.ck-tete p { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: var(--b1); }
.ck-loyer { display: grid; justify-items: end; padding: 9px 14px; border-radius: 14px; color: #fff; text-align: right; background: linear-gradient(135deg, var(--ck-loyer-a), var(--ck-loyer-b)); }
.ck-loyer small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.ck-loyer b { font-size: 17px; font-weight: 800; white-space: nowrap; }
.ck-loyer span { font-size: 12.5px; font-weight: 600; color: var(--jaune); white-space: nowrap; }
.ck-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.ck-puces li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--lb); }
.ck-puces svg { width: 15px; height: 15px; color: var(--b1); }
.ck-villes { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ck-villes button { all: unset; cursor: pointer; padding: 4px 11px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--b1); border: 1.5px solid #cfe6f5; transition: background .3s, color .3s, border-color .3s; }
.ck-villes button:hover { border-color: var(--b2); }
.ck-villes button.on { color: #fff; background: var(--b1); border-color: var(--b1); }
.ck-villes button:focus-visible { outline: 2px solid var(--b2); outline-offset: 2px; }
/* les villes de la région, empilées elles aussi dans une même case */
.ck-villes-zone { display: grid; }
.ck-ville { grid-area: 1 / 1; padding: 12px 14px; border-radius: 16px; background: #f1f7fc; visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; }
.ck-ville.on { visibility: visible; opacity: 1; transition: opacity .35s, visibility 0s; }
.ck-ville-t { margin: 0; font-size: 13.5px; color: var(--mute); }
.ck-ville-t b { font-size: 16px; font-weight: 800; color: var(--ink); margin-right: 4px; }
.ck-loyers { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.ck-loyers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 7px 11px; border-radius: 11px; background: #fff; }
.ck-loyers span { font-size: 13.5px; font-weight: 600; color: var(--txt); }
.ck-loyers b { font-size: 14.5px; font-weight: 800; color: var(--ink); white-space: nowrap; text-align: right; }
.ck-loyers small { grid-column: 2; font-size: 12px; font-weight: 600; color: var(--g); text-align: right; white-space: nowrap; }
.ck-plus { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.ck-plus li { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--b1); background: #fff; border: 1px solid #d6eaf7; }
.ck-listes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto; padding-top: 14px; }
.ck-h { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ck-h svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: #fff; }
.ck-h.ok { color: var(--g); } .ck-h.ok svg { background: var(--g); }
.ck-h.sv { color: #a87400; } .ck-h.sv svg { background: #e0a810; }
.ck-listes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.ck-listes li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.4; color: var(--txt); }
.ck-listes li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--g); }
.ck-listes div + div li::before { background: #e0a810; }
.ck-note { grid-area: note; position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: #3e5566; }
.ck-note svg { flex: none; width: 16px; height: 16px; color: var(--b1); }

@media (max-width: 1080px) { .ck { grid-template-columns: minmax(0, 1fr) min(410px, var(--ck-largeur-fiche)); gap: 14px 24px; } }
@media (max-width: 860px) {
  .ck-sec { padding: 34px 0 34px; }
  .ck-titre { padding: 40px 0 26px; }
  .ck { grid-template-columns: minmax(0, 1fr); grid-template-areas: "onglets" "carte" "fiches" "note"; grid-template-rows: auto; }
  .ck-carte { max-width: 340px; }
  .ck-lieu text { font-size: calc(var(--ck-nom-taille) * 1.3); stroke-width: 5px; }   /* la carte est réduite : noms plus gros pour rester lisibles */
  .ck-lieu.on text { font-size: calc(var(--ck-nom-taille) * 1.36); }
  .ck-onglets { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  .ck-onglets::-webkit-scrollbar { display: none; }
  .ck-onglets button { flex: none; }
  .ck-rose { left: auto; right: 14px; bottom: auto; top: 18px; width: 46px; height: 46px; }
  .ck-coord { display: none; }
  .ck-note { padding-left: 0; }
}
@media (max-width: 480px) {
  .ck-fiche { padding: 16px 14px 14px; }
  .ck-tete { grid-template-columns: minmax(0, 1fr); }
  .ck-loyer { justify-items: start; text-align: left; }
  .ck-listes { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-sec::before, .ck-rose, .ck-halo, .ck-lieu.on .halo { animation: none; }
  .js .ck .ck-cote { stroke-dashoffset: 0; }
  .js .ck .ck-lieu { opacity: 1; }
}

/* dégradés et ombre de l'île (attributs du SVG pilotés par les variables) */
.ck .s-sable1 { stop-color: var(--ck-sable-clair); } .ck .s-sable2 { stop-color: var(--ck-sable-fonce); }
.ck .s-vert1 { stop-color: var(--ck-region-on-clair); } .ck .s-vert2 { stop-color: var(--ck-region-on-fonce); }
.ck .s-lagon1 { stop-color: var(--ck-lagon); }
.ck .s-ombre { flood-opacity: var(--ck-ombre-ile); }

/* chiffres clés sous le titre (page Logement) */
.ck-titre .tt { max-width: 860px; margin-left: auto; margin-right: auto; }
.ck-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin: 26px auto 0; padding: 0; list-style: none; }
.ck-chiffres li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; text-align: center; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 18px 34px -24px rgb(15 42 61 / .5); }
.ck-chiffres b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--b1); }
.ck-chiffres span { font-size: 13.5px; line-height: 1.4; color: var(--mute); }
@media (max-width: 700px) { .ck-chiffres { grid-template-columns: minmax(0, 1fr); } .ck-chiffres b { font-size: 20px; } }