/* Yacht Tracker — pages yacht, port, liste des ports */
:root{--paper:#F6F7F7;--white:#FFF;--ink:#0B1F33;--slate:#5E6E7C;--mist:#98A5B0;--hair:#DDE2E6;--teak:#A0683A;--sea:#DCE4E9;
  --serif:'Bodoni Moda',Didot,'Times New Roman',serif;--sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;--pad:clamp(20px,4vw,64px);--w:1440px}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:300 clamp(15px,1vw,17px)/1.65 var(--sans);-webkit-font-smoothing:antialiased;padding:var(--pad)}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--teak)}
:focus-visible{outline:1px solid var(--teak);outline-offset:3px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:var(--w);margin:0 auto}
.brand{display:block;line-height:0}
.brand img{display:block;width:clamp(150px,16vw,220px);height:auto;max-height:40px;object-fit:contain;object-position:left center}
.top nav{display:flex;gap:clamp(12px,2vw,24px);color:var(--slate)}
.top nav a{color:var(--slate);text-decoration:none;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
main{max-width:var(--w);margin:clamp(36px,5vw,72px) auto 0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--mist);font-size:.9em;margin-bottom:clamp(20px,2.4vw,32px)}
.crumbs a{color:var(--slate);text-decoration:none}
.kind{color:var(--slate)}
h1{font:400 clamp(40px,5vw,72px)/1.02 var(--serif);letter-spacing:-.015em;margin-top:6px}
.lede{color:var(--slate);margin-top:14px;max-width:70ch}
.note{max-width:70ch}
.photo{margin:clamp(24px,3vw,40px) 0 0}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--sea)}
.photo figcaption{margin-top:8px;color:var(--mist);font-size:.85em}
.photo figcaption a{color:var(--slate)}
section{margin-top:clamp(32px,4vw,52px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--ink)}
.status p:first-child{font:400 clamp(22px,2vw,30px)/1.3 var(--serif)}
.small{color:var(--slate);margin-top:6px}
.cta{display:inline-block;margin-top:clamp(18px,2vw,24px);padding:14px 22px;border:1px solid var(--ink);text-decoration:none;transition:.3s}
.cta:hover{background:var(--ink);color:var(--paper)}
h2{font:400 clamp(22px,1.8vw,28px)/1.2 var(--serif);font-style:italic;margin-bottom:10px}
dl{display:grid;grid-template-columns:minmax(120px,36%) 1fr}
dt,dd{padding:11px 0;border-bottom:1px solid var(--hair)}
dt{color:var(--slate)}
dd{text-align:right;font-weight:400;font-variant-numeric:tabular-nums}
.list{list-style:none;margin-top:clamp(20px,2vw,28px);border-top:1px solid var(--hair)}
.list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.list a span{font:400 clamp(18px,1.4vw,22px)/1.2 var(--serif)}
.list a small{display:block;font:300 .72em/1.5 var(--sans);color:var(--slate);margin-top:4px}
.list a b{font:400 clamp(18px,1.4vw,22px)/1.2 var(--serif);white-space:nowrap}
.list a:hover span{color:var(--teak)}
section > p:last-child a{color:var(--slate)}
.note{margin-top:clamp(32px,4vw,52px);color:var(--mist);font-size:.9em}
.note a{color:var(--slate)}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:var(--w);margin:clamp(48px,6vw,88px) auto 0;padding-top:20px;border-top:1px solid var(--hair);color:var(--mist);font-size:.9em}
footer a{color:var(--slate)}
@media (max-width:520px){
  .top{flex-wrap:nowrap}
  .top nav{gap:8px;font-size:.82em;flex:none}
  .brand{flex:1;min-width:0}
  .brand img{width:100%;max-width:190px;max-height:30px}
}
@media (max-width:360px){.top nav{gap:6px;font-size:.76em}}

/* page port : carte du port + liste */
.port-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(24px,3vw,40px);align-items:start}
.port-map{position:sticky;top:24px;height:min(76vh,760px);background:var(--sea);overflow:hidden}
#portmap{position:absolute;inset:0;background:var(--sea)}
.port-list .cta{margin-top:0;margin-bottom:clamp(16px,2vw,24px)}
.port-list .list{margin-top:0}
.list li[data-mmsi] a:hover b{color:var(--teak)}
.pm-boat{background:none;border:0}
.leaflet-container{font:inherit}
.leaflet-tooltip{background:var(--paper);border:1px solid var(--hair);border-radius:0;box-shadow:0 6px 20px #0B1F3314;color:var(--ink);font:400 13px/1.3 var(--sans);padding:6px 10px}
.leaflet-tooltip-top:before{border-top-color:var(--hair)}
.leaflet-bar{border:0!important;box-shadow:none!important}
.leaflet-bar a{width:36px!important;height:36px!important;line-height:36px!important;background:var(--paper)!important;color:var(--ink)!important;border:0!important}
.leaflet-bar a:first-child{border-bottom:1px solid var(--hair)!important}
.leaflet-control-attribution{background:#F6F7F7CC!important;color:var(--mist)!important;font-size:10px!important}
@media (max-width:860px){.port-layout{grid-template-columns:1fr}.port-map{position:relative;top:0;height:55vh}}

/* fiche yacht */
.y-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);margin-top:clamp(24px,3vw,40px);align-items:start}
.y-hero .photo{margin:0}
.y-hero .photo img{max-height:380px}
.y-info section:first-child{margin-top:0}
.profile{margin:0}
.profile svg{display:block;width:100%;height:auto}
.profile figcaption{display:flex;justify-content:space-between;color:var(--mist);font-size:.85em;margin-top:6px}
.dims{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);margin-top:clamp(18px,2vw,26px)}
.dims div{padding:16px 0 18px}
.dims div+div{padding-left:16px;border-left:1px solid var(--hair)}
.dims b{display:block;font:400 clamp(30px,2.6vw,44px)/1 var(--serif);font-variant-numeric:lining-nums}
.dims b small{font:300 .4em var(--sans);color:var(--slate);margin-left:3px}
.dims span{display:block;margin-top:8px;color:var(--slate)}
.y-where{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,72px)}
.y-mapbox{position:relative;height:clamp(300px,34vw,460px);background:var(--sea);overflow:hidden}
#yachtmap{position:absolute;inset:0;background:var(--sea)}
.y-map .small{font-size:.9em}
.list b.now{font:400 .8em/1 var(--sans);color:var(--teak);letter-spacing:.04em}
@media (max-width:860px){.y-hero,.y-where{grid-template-columns:1fr}.y-hero .photo img{max-height:none}}

/* carte dans la fiche yacht */
.y-info .y-mapbox{height:clamp(300px,30vw,440px)}
.map-live{position:absolute;z-index:500;top:14px;left:14px;padding:9px 14px;background:#F6F7F7F2;border:1px solid var(--hair);color:var(--ink);text-decoration:none;font-size:.92em;box-shadow:0 6px 18px #0B1F3314;transition:border-color .25s}
.map-live:hover{border-color:var(--ink);color:var(--ink)}
.map-caption{margin-top:12px;font:400 clamp(18px,1.4vw,22px)/1.35 var(--serif)}
.map-caption span{display:block;margin-top:4px;font:300 .72em/1.5 var(--sans);color:var(--slate)}
.y-info section{margin-top:clamp(26px,3vw,40px)}
.y-ports{margin-top:clamp(26px,3vw,40px)}

/* pulsation autour d'un yacht localisé */
.pm-boat svg{position:relative}
.pulse-ring{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:1px solid rgba(11,31,51,.4);background:rgba(11,31,51,.05);opacity:0;pointer-events:none;animation:ytpulse 3.6s cubic-bezier(.25,.6,.35,1) infinite}
.pulse-ring+.pulse-ring{animation-delay:1.8s}
@keyframes ytpulse{0%{transform:scale(.8);opacity:.7}100%{transform:scale(3);opacity:0}}
@media (prefers-reduced-motion:reduce){.pulse-ring{animation:none;opacity:.4;transform:scale(1.6)}}

/* listes, classements, raccourcis */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips a{padding:7px 14px;border:1px solid var(--hair);border-radius:999px;color:var(--slate);text-decoration:none;font-size:.92em;transition:.25s}
.chips a:hover{border-color:var(--ink);color:var(--ink)}
.chips a small{color:var(--mist);margin-left:4px}
.chips.letters a{border-radius:0;padding:5px 10px;border-color:transparent}
h3.letter{font:400 clamp(24px,2vw,32px)/1 var(--serif);margin-top:clamp(28px,3vw,40px);scroll-margin-top:20px}
.list.ranked em{font:400 .8em var(--sans);font-style:normal;color:var(--mist);display:inline-block;min-width:2.4em}
footer nav{display:flex;flex-wrap:wrap;gap:18px}

/* filtres de la page Tous les yachts */
.filters{margin-top:clamp(24px,3vw,40px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--ink);display:grid;gap:18px}
.facet h2{font-size:1.05em;margin-bottom:6px}
.chips a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips a.on small{color:#B9C4CE}
.chips a.off{opacity:.35;cursor:default;pointer-events:none}
.chips.letters a.on{background:var(--ink);color:var(--paper)}
.filter-bar{display:flex;align-items:center;gap:18px;min-height:24px;color:var(--slate)}
.filter-bar button{background:none;border:0;padding:0;color:var(--slate);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.filter-bar button:hover{color:var(--ink)}
.results{margin-top:clamp(12px,2vw,20px);border-top:0;padding-top:0}
.empty-note{margin-top:20px;color:var(--slate)}
[hidden]{display:none!important}

/* icône tarteaucitron : au-dessus du pied de page, décalée du bord */
#tarteaucitronIcon{bottom:18px!important;right:18px!important}


/* ===== fiche yacht v27 : l'info d'abord, texte révélé, yacht suivant ===== */
.yx-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,3vw,48px) clamp(28px,5vw,90px);min-height:calc(100svh - 250px)}
.yx-ident{align-self:center}
.yx-facts{display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--slate)}
.yx-name{font:400 clamp(56px,9vw,150px)/.9 var(--serif);letter-spacing:-.025em;margin:14px 0 0 -.04em;overflow-wrap:anywhere}
.yx-where{font:italic 400 clamp(22px,2vw,30px)/1.3 var(--serif);margin-top:clamp(20px,2.4vw,32px);max-width:28ch}
.yx-status{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:14px;color:var(--slate);font-variant-numeric:tabular-nums}
.yx-status .on{display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.yx-dot{width:7px;height:7px;border-radius:50%;background:#3FA37A;animation:yxdot 2s infinite}
@keyframes yxdot{0%{box-shadow:0 0 0 0 rgba(63,163,122,.5)}70%{box-shadow:0 0 0 9px rgba(63,163,122,0)}100%{box-shadow:0 0 0 0 rgba(63,163,122,0)}}
.y-info .y-mapbox,.yx-map{height:auto;min-height:clamp(300px,34vw,520px)}
.yx-figs{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:end;gap:20px;border-top:1px solid var(--ink);padding-top:clamp(18px,2vw,26px);align-self:end}
.yx-figs span{display:block;color:var(--slate);font-size:.9em}
.yx-figs b{font:400 clamp(24px,2.6vw,40px)/1.15 var(--serif);font-variant-numeric:lining-nums}
.yx-hint{display:flex;align-items:center;gap:12px;color:var(--slate);font-size:.9em}
.yx-hint i{position:relative;width:1px;height:38px;background:var(--hair);overflow:hidden}
.yx-hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:yxdrop 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes yxdrop{to{top:100%}}

.yx-photo{margin:clamp(28px,3vw,44px) 0 0}
.yx-frame{overflow:hidden;height:min(88svh,900px);min-height:360px;background:var(--sea)}
.yx-frame img{display:block;width:100%;height:118%;object-fit:cover;will-change:transform}
.yx-photo figcaption{margin-top:8px;color:var(--mist);font-size:.85em}
.yx-photo figcaption a{color:var(--slate)}
.yx-profile{margin-top:clamp(28px,3vw,44px)}

.yx-intro{border-top:0;padding:clamp(90px,13vw,200px) 0;text-align:center}
.yx-intro h2{color:var(--teak);margin-bottom:clamp(20px,2.4vw,34px)}
.yx-reveal{font:400 clamp(24px,2.8vw,44px)/1.28 var(--serif);letter-spacing:-.01em;max-width:32ch;margin:0 auto}
.yx-reveal .c{color:#CDD3D8;transition:color .15s}
.yx-reveal .c.on{color:var(--ink)}

.yx-chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,5vw,90px);border-top:1px solid var(--hair);padding:clamp(28px,3vw,44px) 0 clamp(44px,5vw,80px);margin-top:0}
.yx-chapter h3{font:400 clamp(28px,3vw,46px)/1.05 var(--serif)}
.yx-chapter p{max-width:62ch;color:var(--slate);font-size:clamp(16px,1.1vw,18px);line-height:1.75}
.yx-wikisrc{color:var(--mist);font-size:.85em;margin-top:6px}
.yx-wikisrc a{color:var(--slate)}

.yx-specs{margin-top:clamp(70px,9vw,140px)}
.yx-specs>h2{font:400 clamp(38px,4.6vw,68px)/1 var(--serif);font-style:normal;margin-bottom:clamp(30px,4vw,60px)}
.yx-spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(28px,4vw,64px)}
.yx-spec-grid h4{font:400 .95em var(--sans);color:var(--teak);padding-bottom:12px;border-bottom:1px solid var(--ink)}

.yx-next{display:block;position:relative;height:170svh;margin:clamp(60px,8vw,120px) calc(var(--pad) * -1) 0;color:var(--ink);text-decoration:none}
.yx-next:hover{color:var(--ink)}
.yx-next-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(40px,8vh,90px)}
.yx-next-img{position:absolute;inset:0;opacity:0;transform:scale(1.12)}
.yx-next-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.yx-next-txt{position:relative;max-width:var(--w);width:100%;margin:0 auto;transition:color .6s}
.yx-next-txt span,.yx-next-txt small{color:var(--slate);transition:color .6s}
.yx-next-txt b{display:block;font:400 clamp(60px,12vw,190px)/.9 var(--serif);letter-spacing:-.02em;margin-top:8px;overflow-wrap:anywhere}
.yx-bar{position:relative;height:1px;background:var(--hair);margin-top:34px}
.yx-bar i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--ink)}
.yx-next-txt small{display:block;margin-top:12px}
.yx-next-txt.light{color:var(--paper)}
.yx-next-txt.light span,.yx-next-txt.light small{color:rgba(246,247,247,.72)}
.yx-next-txt.light .yx-bar{background:rgba(246,247,247,.25)}
.yx-next-txt.light .yx-bar i{background:var(--paper)}
.yx-veil{position:fixed;inset:0;z-index:2000;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .6s}
.yx-veil.on{opacity:1}

@media (max-width:860px){
  .yx-top{grid-template-columns:1fr;min-height:0}
  .yx-map{min-height:280px}
  .yx-figs{grid-template-columns:1fr 1fr}.yx-hint{grid-column:1/-1}
  .yx-chapter,.yx-spec-grid{grid-template-columns:1fr}
  .yx-frame{height:62svh}
}
@media (prefers-reduced-motion:reduce){.yx-dot,.yx-hint i::after{animation:none}.yx-reveal .c{color:var(--ink)}}

/* v30 : photo dans le premier écran, à droite ; carte sous le nom */
.yx-top.has-photo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto 1fr auto;grid-template-areas:"ident photo" "map photo" "figs figs";row-gap:clamp(20px,2.4vw,32px)}
.yx-top.has-photo .yx-ident{grid-area:ident;align-self:end}
.yx-top.has-photo .yx-map{grid-area:map;min-height:clamp(200px,20vw,300px)}
.yx-top.has-photo .yx-figs{grid-area:figs}
.yx-top.has-photo .yx-photo{grid-area:photo;margin:0;display:flex;flex-direction:column;min-height:0}
.yx-top.has-photo .yx-frame{flex:1;height:auto;min-height:clamp(320px,34vw,560px)}
.yx-top.has-photo .yx-name{font-size:clamp(48px,6.4vw,112px)}
@media (max-width:860px){
  .yx-top.has-photo{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"ident" "photo" "map" "figs"}
  .yx-top.has-photo .yx-frame{min-height:0;height:56svh}
}

/* /yachts : recherche, tri, filtres déroulants */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.yl-bar{display:flex;flex-wrap:wrap;gap:12px clamp(16px,2vw,28px);align-items:end}
.yl-search{flex:1 1 280px}
.yl-search input{width:100%;font:300 clamp(18px,1.4vw,22px)/1.2 var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:10px 0;border-radius:0}
.yl-search input::placeholder{color:var(--mist)}
.yl-search input:focus{outline:none;border-bottom-color:var(--teak)}
.yl-sort,.yl-selects label{display:flex;flex-direction:column;gap:4px;font-size:.85em;color:var(--slate)}
.yl-sort select,.yl-selects select{font:300 15px var(--sans);color:var(--ink);background:transparent;border:1px solid var(--hair);border-radius:0;padding:9px 34px 9px 12px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314202B'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.yl-sort select:focus,.yl-selects select:focus{outline:none;border-color:var(--ink)}
.yl-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.yl-more summary::-webkit-details-marker{display:none}
.yl-more summary::after{content:"+";font:300 20px/1 var(--sans);transition:transform .3s}
.yl-more[open] summary::after{transform:rotate(45deg)}
.yl-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(180px,18vw,240px),1fr));gap:16px;margin-top:16px}
.yl-note{margin-top:10px;color:var(--mist);font-size:.85em}

/* pages chantier / designer : présentation rédigée */
.mk-intro{padding:clamp(60px,9vw,130px) 0 clamp(50px,7vw,100px)}
.mk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(160px,16vw,220px),1fr));gap:18px clamp(20px,3vw,40px);border-top:1px solid var(--ink);padding-top:22px;margin-top:clamp(20px,3vw,40px)}
.mk-facts dt{color:var(--slate);font-size:.85em}
.mk-facts dd{font:400 clamp(18px,1.5vw,22px)/1.3 var(--serif);margin:4px 0 0}
.mk-list-title{margin-top:clamp(60px,8vw,110px)}

/* carte animée des escales */
.y-voyage{position:relative;height:clamp(320px,42vw,520px);margin:clamp(14px,2vw,24px) 0 clamp(18px,2.4vw,30px);overflow:hidden;background:#DCE4E9}
#voyagemap{position:absolute;inset:0}
.y-voyage-date{position:absolute;z-index:500;left:clamp(14px,2vw,24px);top:clamp(12px,1.8vw,22px);pointer-events:none;color:var(--ink)}
.y-voyage-date span{display:block;font:400 clamp(26px,3.4vw,46px)/1 var(--serif);font-variant-numeric:lining-nums;text-shadow:0 0 12px #F9FAFA,0 0 4px #F9FAFA}
.y-voyage-date small{display:block;margin-top:6px;font-size:.9em;color:var(--slate);text-shadow:0 0 6px #F9FAFA}
.y-voyage-replay{position:absolute;z-index:500;right:clamp(14px,2vw,24px);top:clamp(12px,1.8vw,22px);font:400 13px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:8px 14px;cursor:pointer}
.y-voyage-replay:hover{border-color:var(--ink)}
.vstop{background:none;border:0}
.vstop i{display:block;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transform:scale(0);transition:transform .35s cubic-bezier(.2,.8,.3,1.4)}
.vstop.on i{transform:scale(1)}
.vlabel.leaflet-tooltip{background:var(--paper);border:0;box-shadow:0 2px 10px rgba(20,32,43,.12);border-radius:0;padding:4px 8px;font:400 12px var(--sans);color:var(--ink);opacity:0!important;transition:opacity .4s}
.vlabel.leaflet-tooltip.on{opacity:1!important}
.vlabel.leaflet-tooltip::before{display:none}
.vlabel b{font-weight:500}.vlabel small{color:var(--slate);margin-left:6px}