/* Polices auto-hébergées (Archivo variable, IBM Plex Mono) */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(./fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(./fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(./fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(./fonts/archivo-latin-wdth-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(./fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(./fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Enveloppe d'origine (conservée pour un rendu identique) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: plein écran 3D, carnet de parcours flottant en haut à gauche, barre de commandes en bas */
:root{
  --sky-top:#cfdde3; --sky-bot:#eef1ea;
  --panel:rgba(250,251,247,.88); --panel-solid:#fafbf7;
  --ink:#17241c; --ink-soft:#506155; --line:rgba(23,36,28,.14);
  --fairway:#3f7a3a; --fairway-ink:#ffffff; --sand:#d9c79a;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sky-top:#0f1a1f; --sky-bot:#1f2b26;
  --panel:rgba(18,26,22,.86); --panel-solid:#121a16;
  --ink:#e7eee6; --ink-soft:#9fb2a4; --line:rgba(231,238,230,.16);
  --fairway:#6fb35f; --fairway-ink:#0d1a10; --sand:#c9b47e; color-scheme:dark}}
:root[data-theme="dark"]{
  --sky-top:#0f1a1f; --sky-bot:#1f2b26;
  --panel:rgba(18,26,22,.86); --panel-solid:#121a16;
  --ink:#e7eee6; --ink-soft:#9fb2a4; --line:rgba(231,238,230,.16);
  --fairway:#6fb35f; --fairway-ink:#0d1a10; --sand:#c9b47e; color-scheme:dark}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--sky-bot);color:var(--ink);font-family:var(--f-body);overflow:hidden;
  background-image:linear-gradient(var(--sky-top),var(--sky-bot))}
#app{position:fixed;inset:0}
canvas{display:block;touch-action:none;outline:none}
.card{background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:6px}
.book{position:fixed;left:16px;top:calc(16px + env(safe-area-inset-top,0px));
  padding:14px 16px 12px;max-width:min(320px,calc(100% - 32px))}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
h1{font-family:var(--f-display);font-stretch:68%;font-weight:800;font-size:clamp(28px,5vw,40px);
  line-height:.92;letter-spacing:.01em;text-transform:uppercase;margin:6px 0 10px;text-wrap:balance}
.stats{display:grid;grid-template-columns:repeat(3,auto);gap:4px 18px;margin:0;border-top:1px solid var(--line);padding-top:10px}
.stats dt{font-size:11px;color:var(--ink-soft);letter-spacing:.04em}
.stats dd{margin:0;font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums;grid-row:2}
.probe{margin-top:10px;font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);min-height:1.3em}
.probe b{color:var(--ink);font-weight:500}
.bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;justify-content:center;
  width:max-content;max-width:calc(100% - 32px)}
button{font:600 14px/1 var(--f-body);color:var(--ink);background:transparent;border:1px solid var(--line);
  border-radius:4px;padding:10px 14px;cursor:pointer}
button:hover{background:var(--line)}
button:focus-visible,input:focus-visible{outline:2px solid var(--fairway);outline-offset:2px}
button.primary{background:var(--fairway);color:var(--fairway-ink);border-color:transparent}
button.primary:hover{filter:brightness(1.08)}
.relief{display:flex;align-items:center;gap:8px;padding:0 6px;font-size:13px;color:var(--ink-soft)}
.relief output{font-family:var(--f-mono);color:var(--ink);min-width:3.2em;font-variant-numeric:tabular-nums}
input[type=range]{accent-color:var(--fairway);width:110px}
.compass{position:fixed;right:16px;top:calc(16px + env(safe-area-inset-top,0px));width:52px;height:52px;
  display:grid;place-items:center;border-radius:50%}
.compass svg{width:40px;height:40px;transition:none}
.credit{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));font-size:10.5px;
  color:var(--ink-soft);text-align:right;max-width:300px;line-height:1.4}
.loading{position:fixed;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;color:var(--ink-soft);pointer-events:none}
@media (max-width:760px){
  .credit{position:static;margin-top:8px;text-align:left;max-width:none}
  .bar{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .scale{display:none}
  input[type=range]{width:90px}
  .stats dd{font-size:13px}
}
@media (max-width:420px){ button{padding:9px 10px;font-size:13px} .book{padding:12px} }















@media (max-width:760px){}


.pins{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.pin{position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;border:0;padding:0;background:none;cursor:pointer}
.pin:hover{background:none}
.pin span{font:700 13px/1 var(--f-body);background:var(--fairway);color:var(--fairway-ink);border-radius:3px;padding:6px 9px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.pin i{width:2px;height:16px;background:#fff}
.pin:focus-visible span{outline:2px solid var(--ink);outline-offset:2px}
.mark{position:absolute;left:0;top:0;pointer-events:none;font:500 11px/1 var(--f-mono);color:#fff;background:rgba(15,25,18,.72);padding:4px 6px;border-radius:3px;white-space:nowrap}
.note{font-size:12px;color:var(--ink-soft);margin:8px 0 0;line-height:1.4;max-width:30ch}
.bar .sep{width:1px;align-self:stretch;background:var(--line)}
.hint{position:fixed;left:50%;transform:translateX(-50%);top:calc(16px + env(safe-area-inset-top,0px));
  font-size:12px;padding:8px 12px;color:var(--ink-soft);pointer-events:none;text-align:center;max-width:calc(100% - 180px)}
.hint kbd{font:500 11px var(--f-mono);border:1px solid var(--line);border-radius:3px;padding:1px 4px;color:var(--ink)}
.tees{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.tees li{display:flex;align-items:center;gap:8px}
.tees i{width:10px;height:10px;border-radius:50%;border:1px solid var(--line);flex:none}
.lang{position:fixed;right:80px;top:calc(22px + env(safe-area-inset-top,0px));font:700 13px/1 var(--f-mono);padding:10px 12px;border-radius:6px}
.pin.place span{background:var(--panel-solid);color:var(--ink);border:1px solid var(--line);font-weight:600;font-size:12px;padding:5px 8px}
.pin.place i{background:var(--ink-soft)}
.pin.place button{border:0;padding:0;background:none;cursor:pointer;font:inherit;color:inherit}
.pin.place button:hover{background:none}
.pin.place button:focus-visible{outline:none}
.pin.place button:focus-visible span{outline:2px solid var(--ink);outline-offset:2px}
.place-cta{display:none;margin-bottom:6px;font:700 12px/1 var(--f-body);background:var(--fairway);color:var(--fairway-ink);text-decoration:none;
  padding:8px 10px;border-radius:3px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pin.ouvert .place-cta{display:block}
.place-cta:hover{filter:brightness(1.08)}
.place-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mlabel{position:absolute;left:0;top:0;pointer-events:none;font:600 13px/1 var(--f-mono);color:#fff;background:#c0392b;padding:6px 8px;border-radius:4px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}
canvas.measuring{cursor:crosshair}
.pad{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));display:grid;gap:6px}
.pad button{width:52px;height:46px;padding:0;font-size:18px;background:var(--panel-solid)}
button[aria-pressed="true"]{background:var(--ink);color:var(--panel-solid);border-color:transparent}
@media (max-width:760px){ .hint{display:none} .pad{bottom:calc(130px + env(safe-area-inset-bottom,0px))} }
@media (hover:hover) and (pointer:fine){ .pad{display:none} }


/* Vue du Tee : largeurs intermédiaires, pour que le crédit, la barre et l'aide ne se chevauchent pas */
@media (min-width:761px) and (max-width:1439px){
  .book .credit{position:static;margin-top:8px;text-align:left;max-width:none}
}
@media (min-width:761px) and (max-width:1199px){
  .hint{left:386px;transform:none;max-width:calc(100% - 526px)}
}

/* Vue du Tee : éléments ajoutés pour le mobile, masqués ailleurs */
.book-sum,.book-toggle,.bar-plus{display:none}
.bar-menu{position:fixed;right:8px;bottom:calc(62px + env(safe-area-inset-bottom,0px));display:grid;gap:4px;padding:6px;z-index:5}

/* Vue du Tee : mobile (portrait < 761 px, ou écran tactile de moins de 500 px de haut) */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .book{left:8px;top:calc(8px + env(safe-area-inset-top,0px));max-width:calc(100% - 62px);padding:6px 6px 6px 12px;
    display:flex;flex-wrap:wrap;align-items:center;column-gap:4px}
  .book h1{font-size:17px;line-height:1.1;margin:0;flex:none}
  .book .eyebrow{flex-basis:100%;margin-bottom:2px}
  .book #courseInfo,.book #holeInfo{flex-basis:100%;margin-top:8px}
  .book-sum{display:block;flex:1 1 auto;min-width:0;font:600 13px/1.2 var(--f-body);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .book-toggle{display:block;flex:none;margin-left:auto;min-height:36px;padding:0 10px;font-size:12px}
  .book.replie .eyebrow,.book.replie #courseInfo,.book.replie .stats,.book.replie .tees{display:none}
  .book.replie #holeInfo{margin-top:0}
  .book.replie #hLive{margin-top:4px}
  .book.replie #hLive:empty{display:none}
  .book:not(.replie) .book-sum{display:none}
  .book #credit-m{display:none}

  .compass{top:calc(8px + env(safe-area-inset-top,0px));right:8px;width:38px;height:38px}
  .compass svg{width:24px;height:24px}
  .lang{top:calc(52px + env(safe-area-inset-top,0px));right:8px;width:38px;height:38px;padding:0;display:grid;place-items:center;font-size:12px}
  .hint{display:none}

  .bar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    gap:4px;padding:4px;max-width:calc(100% - 16px);bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .bar::-webkit-scrollbar{display:none}
  .bar button{flex:none;min-height:40px;padding:0 9px;font-size:13px;white-space:nowrap}
  .bar .relief{flex:none}
  .bar .sep{display:none}
  #hPrev{order:-2}
  #hNext{order:-1}
  .bar-plus{display:block;position:sticky;right:0;min-width:40px;font-size:18px;background:var(--panel-solid)}
  .bar-menu button{min-height:40px;padding:0 14px;text-align:left;white-space:nowrap}

  #credit{position:fixed;left:8px;right:auto;max-width:calc(100% - 16px);bottom:calc(62px + env(safe-area-inset-bottom,0px));
    margin:0;padding:0 8px;border:3px solid transparent;border-radius:4px;background:var(--panel);font-size:10.5px;line-height:1.4;text-align:left;cursor:pointer;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;max-height:1.4em}
  #credit.ouvert{-webkit-line-clamp:unset;line-clamp:none;max-height:none}
  #credit[hidden]{display:none}
  .pad{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* Vue du Tee : 440 px de large ou moins (tous les iPhone en portrait), libellés courts dans la barre du trou pour tout afficher sans défilement.
   Le libellé complet reste le nom accessible du bouton ; « / '' » empêche la lecture du texte court. */
@media (max-width:440px){
  #hWalk,#hDrone,#hPlan{font-size:0}
  #hWalk::after,#hDrone::after,#hPlan::after{font-size:13px}
  #hWalk::after{content:'Départ';content:'Départ' / ''}
  #hDrone::after{content:'Drone';content:'Drone' / ''}
  #hPlan::after{content:'Trou';content:'Trou' / ''}
  html:lang(en) #hWalk::after{content:'Tee';content:'Tee' / ''}
  html:lang(en) #hDrone::after{content:'Drone';content:'Drone' / ''}
  html:lang(en) #hPlan::after{content:'Hole';content:'Hole' / ''}
}

/* Vue du Tee : écran tactile bas (téléphone en paysage) : le crédit devient un bouton « i » sous EN */
@media (max-height:500px) and (pointer:coarse){
  #credit:not(.ouvert){left:auto;right:8px;bottom:auto;top:calc(96px + env(safe-area-inset-top,0px));width:38px;height:38px;max-height:none;
    padding:0;border-radius:6px;font-size:0;display:grid;place-items:center;background:var(--panel-solid);border:1px solid var(--line)}
  #credit:not(.ouvert)::before{content:'i';font:700 14px/1 var(--f-mono);color:var(--ink)}
  #credit.ouvert{left:auto;right:54px;bottom:auto;top:calc(8px + env(safe-area-inset-top,0px));max-width:min(420px,calc(100% - 70px));
    padding:6px 10px;background:var(--panel-solid);border:1px solid var(--line)}
}

/* --- Verrou de démonstration --- */
.verrou{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:linear-gradient(var(--sky-top),var(--sky-bot))}
.verrou-carte{width:min(360px,100%);padding:28px 24px;display:grid;gap:10px}
.verrou-carte h2{margin:0;font:800 26px/1.1 var(--f-display);font-stretch:68%;color:var(--ink)}
.verrou-carte p{margin:0;color:var(--ink-soft)}
.verrou-carte label{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-top:6px}
.verrou-carte input{font:500 20px var(--f-mono);letter-spacing:.3em;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel-solid);color:var(--ink)}
.verrou-carte button{margin-top:6px;padding:12px 16px}
.verrou-erreur{color:#b3261e!important;font-size:13px}

/* --- Panneau du trou plus compact (place pour le sponsor) --- */
.book.mode-trou h1{font-size:clamp(20px,2.6vw,26px)}
.book.mode-trou .stats dd{font-size:13px}
.book.mode-trou .tees{font-size:12px}

/* --- Sponsor du trou --- */
.sponsor{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:10px;border:1px dashed var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:rgba(127,127,127,.06)}
.sponsor[href]{border-style:solid}
.sponsor[href]:hover .sponsor-cta{text-decoration:underline}
.sponsor-label{font:500 10px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);padding:2px 4px 0}
.sponsor-visuel{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:5px;background:rgba(0,0,0,.2)}
.sponsor-corps{display:flex;flex-direction:column;gap:3px;padding:0 4px 2px}
.sponsor-nom{font:700 17px/1.15 var(--f-display);font-stretch:80%}
.sponsor-desc{font:400 13px/1.4 var(--f-body);color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sponsor-cta{font:600 12px/1.2 var(--f-body);color:var(--accent,var(--ink));margin-top:2px}

/* --- Bouton de réservation (suivi des clics) --- */
.reserver{display:block;margin-top:12px;padding:11px 14px;border-radius:6px;background:var(--fairway);color:var(--fairway-ink);text-align:center;text-decoration:none;font:600 14px/1 var(--f-body)}
.reserver:hover{filter:brightness(1.08)}
@media (max-width:760px){ .book.replie .reserver,.book.replie .sponsor{display:none} }

/* --- Sponsor mis en avant : plus grand que les infos du trou --- */
.book.mode-trou h1{font-size:clamp(16px,1.8vw,19px)}
.book.mode-trou .eyebrow{font-size:10px}
.book.mode-trou .stats dt{font-size:10px}
.book.mode-trou .stats dd{font-size:12px}
.book.mode-trou .tees{font-size:11px;gap:2px}
#holeInfo:not([hidden]){display:flex;flex-direction:column}
#holeInfo .sponsor{order:-1;margin:8px 0 12px;padding:10px;gap:8px;border-width:1px;background:rgba(127,127,127,.09)}
#holeInfo .sponsor.libre{padding:16px 16px 18px}
#holeInfo .sponsor.avec-banniere .sponsor-nom{font-size:22px}
#holeInfo .sponsor-label{font-size:11px}
#holeInfo .sponsor-nom{font-size:clamp(24px,3vw,32px);line-height:1.05}
@media (max-width:760px){ #holeInfo .sponsor-nom,#holeInfo .sponsor.avec-banniere .sponsor-nom{font-size:20px} #holeInfo .sponsor.libre{padding:12px 14px} }

/* --- Panneau du trou compact (28 oct. 2026) : tient sur un écran de portable même avec un sponsor à bannière --- */
.book.mode-trou .tees{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:8px}
#holeInfo .sponsor{margin:6px 0 10px;padding:8px;gap:6px}
#holeInfo .sponsor.libre{padding:12px 14px}
#holeInfo .sponsor-nom{font-size:clamp(20px,2.2vw,24px)}
#holeInfo .sponsor.avec-banniere .sponsor-nom{font-size:18px}
#holeInfo .sponsor-desc{-webkit-line-clamp:1;font-size:12px}
#holeInfo .probe{margin-top:6px}
#holeInfo .probe:empty{display:none}
#hMeteoLigne{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:6px}
#hMeteoLigne .probe{margin-top:0}
.book.mode-trou .reserver{margin-top:10px;padding:9px 14px}
@media (max-width:760px){ .book.replie #hVent{display:none} }
/* Filet de sécurité : sur un écran très bas, le panneau défile au lieu de passer sous les boutons du bas */
#holeInfo .sponsor-label{font-size:10px}
#holeInfo .sponsor.avec-banniere{gap:5px}
#holeInfo .sponsor.avec-banniere .sponsor-nom{font-size:17px}
.book.mode-trou .reserver{padding:8px 14px}
@media (min-width:761px){ .book.mode-trou{max-height:calc(100% - 96px);overflow-y:auto;overscroll-behavior:contain} }