/* Styles propres à la page d'accueil (carte aérienne du récif) — pas
   partagés avec le reste du site, voir assets/css/style.css pour les 12
   autres pages. */
:root{
  --large:#04202C;
  --tombant:#0A4A5E;
  --lagon:#1FB6C9;
  --lagon-clair:#4FD8D9;
  --recif:#A9EDE8;
  --terre:#0B2A2C;
  --corail:#FF8A6F;
  --corail-clair:#FFB27A;
  --texte:#F5FAF9;
  --texte-2:#A9CBCB;
  --texte-3:#6E9298;

  --f-titre:"DIN Condensed","Oswald","Archivo Narrow","Roboto Condensed","Arial Narrow",sans-serif;
  --f-texte:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-donnee:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Pas de scroll sur la page d'accueil, quelle que soit la taille d'écran :
   tout tient dans un seul écran (mode carte plein écran). Réautorisé en
   dessous pour le mode mobile/tactile (liste empilée, qui a besoin de
   défiler). */
html,body{height:100%;overflow:hidden}
body{background:var(--large);color:var(--texte);font-family:var(--f-texte)}

.feuille{height:100%;padding:clamp(14px,2.2vw,26px)}
/* Curseur natif toujours visible (choix explicite : pas de cursor:none) — le
   bateau reste un compagnon visuel à côté du vrai curseur, pas un remplacement. */
.cadre{position:relative;border:1px solid rgba(140,210,216,.28);background:var(--large);
  display:flex;flex-direction:column;height:100%}

.cartouche{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;
  padding:clamp(12px,1.6vw,20px) clamp(14px,2vw,24px);border-bottom:1px solid rgba(140,210,216,.22)}
.identite h1{font-family:var(--f-titre);font-weight:600;font-size:clamp(23px,2.8vw,32px);letter-spacing:.13em;text-transform:uppercase;line-height:1}
.identite h1 a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.identite h1 a:hover,.identite h1 a:focus-visible{border-bottom-color:var(--lagon-clair)}
.identite p{font-family:var(--f-titre);font-size:clamp(14px,1.6vw,18px);letter-spacing:.2em;text-transform:uppercase;color:var(--lagon-clair);margin-top:7px}
.refs{font-family:var(--f-donnee);font-size:13px;line-height:1.85;letter-spacing:.06em;color:var(--texte-3);text-align:right;text-transform:uppercase}
.refs span{color:var(--texte-2)}
.refs b{color:var(--recif);font-weight:400}

/* La carte occupe tout l'écran, fixe, en arrière-plan — l'en-tête et le pied
   de page flottent par-dessus (ni l'un ni l'autre n'a de fond opaque propre,
   donc la carte reste visible derrière leur texte). Le bateau peut ainsi
   naviguer sur toute la page, pas juste une zone centrale bornée. */
.champ{position:fixed;inset:0;z-index:0;background:var(--large)}
#releve{position:absolute;inset:0;width:100%;height:100%;display:block}

.point{position:absolute;z-index:2;display:block;width:max-content;max-width:min(260px,40vw);
  padding:0 0 0 17px;background:none;border:0;text-align:left;cursor:inherit;color:inherit;font:inherit;
  text-decoration:none;transform:translateY(-50%);transition:transform .3s ease}
.point::before{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--terre);border:1.6px solid var(--corail);transition:background .3s ease,box-shadow .3s ease}
.point:hover::before,.point:focus-visible::before,.point.actif::before{background:var(--corail);box-shadow:0 0 0 4px rgba(255,138,111,.2)}
.point:hover,.point:focus-visible,.point.actif{transform:translateY(-50%) translateX(2px)}
.point:focus-visible{outline:1px solid var(--corail-clair);outline-offset:6px;cursor:auto}
.point.gauche{padding:0 17px 0 0;text-align:right;transform:translate(-100%,-50%)}
.point.gauche::before{left:auto;right:0}
.point.gauche:hover,.point.gauche:focus-visible,.point.gauche.actif{transform:translate(-100%,-50%) translateX(-2px)}
.nom{display:block;font-family:var(--f-titre);font-size:clamp(16px,1.8vw,20px);font-weight:600;letter-spacing:.15em;text-transform:uppercase;line-height:1.05}
.objet{display:block;font-size:14px;line-height:1.45;color:var(--texte-2);margin-top:4px}
.mesures{display:block;font-family:var(--f-donnee);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-3);margin-top:6px;transition:color .3s ease}
.point:hover .mesures,.point:focus-visible .mesures,.point.actif .mesures{color:var(--lagon-clair)}
.point.arelever::before{border-style:dashed;border-color:var(--corail-clair);background:none}
.point.arelever .nom{color:var(--texte-2)}
.point.arelever .statut{display:block;font-family:var(--f-donnee);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--corail-clair);margin-top:6px}

.indication{position:absolute;z-index:4;left:50%;bottom:15px;transform:translateX(-50%);
  font-family:var(--f-donnee);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--corail-clair);
  background:rgba(4,32,44,.92);border:1px solid rgba(255,138,111,.38);padding:7px 13px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;white-space:nowrap;pointer-events:none}
.indication.visible{opacity:1;visibility:visible}

.annotation{position:absolute;z-index:5;left:clamp(14px,2vw,24px);bottom:clamp(50px,6vw,62px);right:clamp(14px,2vw,24px);
  max-width:520px;padding:13px 16px 15px;background:rgba(4,32,44,.96);
  border:1px solid rgba(140,210,216,.3);border-left:3px solid var(--corail);
  opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .3s ease,transform .3s ease,visibility .3s;cursor:auto}
.annotation.visible{opacity:1;visibility:visible;transform:none}
.annotation .cle{font-family:var(--f-donnee);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--corail)}
.annotation .titre{font-family:var(--f-titre);font-size:20px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.annotation .corps{font-size:15px;line-height:1.55;color:var(--texte-2);margin-top:6px}
.annotation .fermer{position:absolute;top:9px;right:11px;background:none;border:0;cursor:pointer;font-family:var(--f-donnee);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-3);padding:3px 5px}
.annotation .fermer:hover{color:var(--texte)}

.suite{padding:clamp(30px,5vw,64px) clamp(14px,2vw,24px) clamp(24px,4vw,48px);border-top:1px solid rgba(140,210,216,.22)}
.suite h2{font-family:var(--f-titre);font-size:clamp(17px,2vw,21px);letter-spacing:.2em;text-transform:uppercase;color:var(--lagon-clair);margin-bottom:24px}
.entree{padding:20px 0;border-top:1px solid rgba(140,210,216,.14);display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:8px 34px}
.entree:last-child{border-bottom:1px solid rgba(140,210,216,.14)}
.entree h3{font-family:var(--f-titre);font-size:18px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.entree p{font-size:15.5px;line-height:1.65;color:var(--texte-2);max-width:62ch}
.entree .pos{font-family:var(--f-donnee);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-3);margin-top:5px}
@media (max-width:700px){ .entree{grid-template-columns:1fr;gap:6px} }

.pied{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px clamp(14px,2vw,24px) 12px;border-top:1px solid rgba(140,210,216,.22);
  font-family:var(--f-donnee);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-3);
  margin-top:auto}
.pied .avert{color:var(--corail)}
.pied a{color:var(--lagon-clair)}
.pied button{background:none;border:1px solid rgba(140,210,216,.3);color:var(--texte-3);font:inherit;
  letter-spacing:.13em;text-transform:uppercase;padding:5px 9px;cursor:pointer}
.pied button:hover{color:var(--lagon-clair);border-color:var(--lagon-clair)}

/* (hover:none) en plus de la largeur : couvre aussi les tablettes tactiles
   larges (ex. iPad ≥768px), pas seulement les petits écrans — le bateau qui
   suit la souris ne peut pas fonctionner sans pointeur à survol continu. */
@media (max-width:760px), (hover:none){
  /* pas de bateau/carte plein écran sur mobile/tactile : retour au flux
     normal, simple liste empilée des points, qui doit pouvoir défiler
     (contrairement au mode carte plein écran, jamais de scroll souhaité) */
  html,body{height:auto;overflow:visible}
  .feuille{height:auto}
  .cadre{height:auto;min-height:100vh}
  .champ{position:static;min-height:0}
  .points-mobile{position:relative;z-index:2;padding:26px clamp(14px,4vw,22px) 30px;display:flex;flex-direction:column;gap:24px}
  .point,.point.gauche{position:relative !important;left:auto !important;top:auto !important;
    transform:none !important;max-width:none;width:100%;cursor:pointer;text-align:left;padding:0 0 0 17px}
  .point.gauche::before{left:0;right:auto}
  .indication{display:none}
  .refs{text-align:left}
  .annotation{position:relative;left:auto;right:auto;bottom:auto;margin:0 clamp(14px,4vw,22px) 22px;max-width:none}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} .champ,.point{cursor:auto} }