/* Page d'accueil « cabine du navire » : le bureau d'Ariane à bord.
   Tout le décor est une seule image : assets/accueil-bureau.webp (2000 × 1125, générée avec ChatGPT).
   Par-dessus, seulement des morceaux découpés dans cette même image, qui grossissent et s'éclairent au survol :
   - la boussole ouverte (Explorer la carte) → #enter-map ; la grande carte grossit en même temps (décor, non cliquable)
   - la loutre dans sa bouteille (Depuis chez soi) → #home-canape
   - le plateau rond accroché au mur (La Grande Pinède) → #home-pinede
   - la note manuscrite sur le carnet (une pensée d'Ariane) → #note-ariane (accueil-cabine.js)
   Positions = fractions de l'image (0 = bord gauche/haut, 1 = bord droit/bas). Si l'image change, remesurer ici.
   Chargé en dernier : remplace les règles d'accueil de style.css et reference-return.css. */

/* ---------- Repère : où est l'image dans l'écran ---------- */
.home-screen.accueil-cabine{
  container-type:size;height:100svh;min-height:560px;background:#2b1509;isolation:isolate;overflow:hidden}
.accueil-cabine,.accueil-cabine>*{
  --W:max(100cqw,177.78cqh);                     /* largeur de l'image affichée (elle couvre l'écran) */
  --H:max(100cqh,56.25cqw);                      /* hauteur de l'image affichée */
  --px:.5;--py:.5;                               /* cadrage : 0 = gauche/haut, 1 = droite/bas */
  --ox:calc((100cqw - var(--W)) * var(--px));    /* coin haut-gauche de l'image dans l'écran */
  --oy:calc((100cqh - var(--H)) * var(--py));
  --img:url('assets/accueil-bureau.webp')}
.accueil-cabine .home-landscape{
  background:var(--img) calc(var(--px) * 100%) calc(var(--py) * 100%)/var(--W) var(--H) no-repeat,
    linear-gradient(#24120a,#3a1e0f);
  animation:arrive 1.4s ease both}
.accueil-cabine .home-vignette{z-index:1;pointer-events:none;background:radial-gradient(ellipse 95% 85% at 50% 55%,transparent 62%,#0e060299 100%)}
.accueil-cabine .home-edition,.accueil-cabine .home-other,.accueil-cabine .home-map-note{display:none}

/* Écrans d'ordinateur plus carrés (4:3, 16:10) : l'image tient en largeur, posée en bas, rien n'est coupé */
@media(min-width:701px) and (max-aspect-ratio:17/10){
  .accueil-cabine,.accueil-cabine>*{--W:100cqw;--H:56.25cqw;--py:1}
}

/* ---------- Morceaux découpés dans l'image (exactement à leur place) ---------- */
.zone,.zoom-carte{
  position:absolute;z-index:3;padding:0;margin:0;border:0;display:block;cursor:pointer;color:#2b1703;text-decoration:none;
  left:calc(var(--ox) + var(--x) * var(--W));top:calc(var(--oy) + var(--y) * var(--H));
  width:calc(var(--w) * var(--W));height:calc(var(--h) * var(--H));
  background:var(--img) calc(-1 * var(--x) * var(--W)) calc(-1 * var(--y) * var(--H))/var(--W) var(--H) no-repeat;
  -webkit-mask:var(--masque);mask:var(--masque);
  transition:transform .5s cubic-bezier(.2,.8,.3,1.2),filter .5s}
.zone-loutre  {--x:.012;--y:.07; --w:.225;--h:.23; --masque:radial-gradient(closest-side,#000 78%,transparent)}
.zone-jeu     {--x:.808;--y:.03; --w:.18; --h:.34; --masque:radial-gradient(closest-side,#000 86%,transparent)}
.zone-boussole{--x:.712;--y:.618;--w:.126;--h:.27; --masque:radial-gradient(closest-side,#000 82%,transparent);z-index:4}
.zoom-carte   {--x:.286;--y:.592;--w:.43; --h:.276;cursor:default;pointer-events:none;z-index:2;
  --masque:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}

/* Survol : zoom + lueur */
.zone:hover,.zone:focus-visible,.zone.choisi,
.accueil-cabine:has(.zone-boussole:hover,.zone-boussole:focus-visible) .zoom-carte{
  transform:scale(1.08);filter:brightness(1.12) saturate(1.08) drop-shadow(0 0 18px #ffd27a)}
.accueil-cabine:has(.zone-boussole:hover,.zone-boussole:focus-visible) .zoom-carte{transform:scale(1.035)}
.zone:focus-visible{outline:none}
.zone-boussole{animation:respire 3.2s ease-in-out infinite}
.zone-boussole:hover,.zone-boussole:focus-visible{animation:none}
@keyframes respire{50%{filter:brightness(1.1) drop-shadow(0 0 10px #ffd27a99)}}
.zone img{display:none}

/* Nom de l'objet : apparaît au survol (toujours visible sur écran tactile) */
.plaque{
  position:absolute;left:var(--lx);top:var(--ly);transform:translate(-50%,6px);white-space:nowrap;pointer-events:none;z-index:6;
  padding:4px 14px;border-radius:2px;text-align:center;opacity:0;transition:opacity .35s,transform .35s;
  font:italic clamp(14px,calc(var(--W) * .0105),22px) var(--display);color:#2b1703;
  background:linear-gradient(180deg,#f3dc9a,#c9a050 60%,#a87d33);box-shadow:inset 0 1px #fff4c899,0 4px 10px #000b;text-shadow:0 1px #fff0c899}
.plaque small{white-space:normal;width:max-content;max-width:19em;margin:2px auto 0;line-height:1.35;display:block;font:normal clamp(10px,calc(var(--W) * .007),14px) var(--body)}
.plaque b{font-style:normal}
.plaque-loutre  {--lx:calc(var(--ox) + .125 * var(--W));--ly:calc(var(--oy) + .31 * var(--H))}
.plaque-jeu     {--lx:calc(var(--ox) + .898 * var(--W));--ly:calc(var(--oy) + .37 * var(--H))}
.plaque-boussole{--lx:calc(var(--ox) + .775 * var(--W));--ly:calc(var(--oy) + .6 * var(--H));top:auto;bottom:calc(100cqh - var(--ly))}
.plaque-note    {--lx:calc(var(--ox) + .26 * var(--W)); --ly:calc(var(--oy) + .875 * var(--H))}
.accueil-cabine:has(#home-canape:hover,#home-canape:focus-visible) .plaque-loutre,
.accueil-cabine:has(#home-pinede:hover,#home-pinede:focus-visible) .plaque-jeu,
.accueil-cabine:has(#enter-map:hover,#enter-map:focus-visible) .plaque-boussole,
.accueil-cabine:has(#note-ariane:hover,#note-ariane:focus-visible) .plaque-note{opacity:1;transform:translate(-50%,0)}

/* ---------- La pensée d'Ariane, notée sur la page droite du carnet ---------- */
.note-carnet{
  position:absolute;z-index:3;cursor:pointer;border:0;padding:4px 6px;background:none;
  left:calc(var(--ox) + .249 * var(--W));top:calc(var(--oy) + .785 * var(--H));width:calc(.075 * var(--W));
  transform:translate(-50%,-50%) rotate(-6deg) skewX(-8deg);transition:transform .5s,filter .5s,text-shadow .5s;
  font:calc(var(--W) * .0112)/1.2 'Cedarville Cursive',cursive;color:#4b2f14;text-align:center}
.note-carnet:hover,.note-carnet:focus-visible{transform:translate(-50%,-50%) rotate(-6deg) skewX(-8deg) scale(1.12);color:#7a3c12;text-shadow:0 0 10px #ffe7a8,0 0 2px #fff6d8;outline:none}

/* ---------- Titre, au-dessus de la mer ---------- */
.accueil-cabine .home-copy{
  position:absolute;z-index:5;transform:translateX(-50%);max-width:none;margin:0;text-align:center;pointer-events:none;
  left:calc(var(--ox) + .53 * var(--W));top:max(64px,calc(var(--oy) + .085 * var(--H)));width:min(92cqw,calc(.46 * var(--W)));
  padding:14px 28px!important;background:radial-gradient(closest-side,#1c0d04c7,#1c0d0499 55%,transparent)}
.accueil-cabine .home-copy .overline{color:#f1d79c;text-shadow:0 1px 2px #1d0c03}
.accueil-cabine .home-copy h1{margin:.12em 0 .3em;font-size:clamp(28px,calc(var(--W) * .03),62px);text-shadow:0 2px 3px #1d0c03,0 0 28px #1d0c03}
.accueil-cabine .home-copy h1 br{display:none}
.accueil-cabine .home-intro{margin:0;font-size:clamp(13px,calc(var(--W) * .0095),19px);color:#f6e4b8;text-shadow:0 1px 2px #1d0c03,0 0 12px #1d0c03}

.accueil-cabine .home-footer{z-index:5;padding-top:18px;background:linear-gradient(transparent,#120803cc);text-shadow:0 1px 2px #120803,0 0 8px #120803}

/* Écran tactile : pas de survol, les noms restent affichés */
@media(hover:none){ .plaque{opacity:1;transform:translate(-50%,0)} }

/* ---------- Téléphone et écrans en hauteur : une deuxième image, verticale (9:16),
   assets/accueil-bureau-telephone.webp (1125 × 2000, générée avec ChatGPT). Mêmes principes, autres mesures. ---------- */
@media(max-aspect-ratio:1/1){
  .home-screen.accueil-cabine{min-height:600px;background:linear-gradient(#5a3518,#2b1509 40%)}
  .accueil-cabine,.accueil-cabine>*{
    --img:url('assets/accueil-bureau-telephone.webp');
    --W:min(112cqw,56.25cqh);                    /* au plus 12 % coupés sur les côtés, jamais en haut ou en bas */
    --H:calc(var(--W) * 1.7778);
    --px:.55;--py:1}
  .zone-loutre  {--x:.36; --y:.058;--w:.27;--h:.115;--masque:radial-gradient(closest-side,#000 80%,transparent)}
  .zone-jeu     {--x:.28; --y:.318;--w:.44;--h:.218;--masque:radial-gradient(closest-side,#000 90%,transparent)}
  .zone-boussole{--x:.735;--y:.69; --w:.24;--h:.18; --masque:radial-gradient(closest-side,#000 82%,transparent)}
  .zoom-carte   {--x:.105;--y:.62; --w:.72;--h:.16}
  .plaque{font-size:13px;padding:3px 9px}
  .plaque small{display:none}
  .plaque-loutre  {--lx:calc(var(--ox) + .8 * var(--W)); --ly:calc(var(--oy) + .1 * var(--H))}
  .plaque-jeu     {--lx:calc(var(--ox) + .5 * var(--W)); --ly:calc(var(--oy) + .55 * var(--H))}
  .plaque-boussole{--lx:calc(var(--ox) + .76 * var(--W));--ly:calc(var(--oy) + .875 * var(--H));top:var(--ly);bottom:auto;font-size:14px}
  .plaque-note    {--lx:calc(var(--ox) + .22 * var(--W));--ly:calc(var(--oy) + .895 * var(--H))}
  .note-carnet{left:calc(var(--ox) + .315 * var(--W));top:calc(var(--oy) + .845 * var(--H));width:calc(.15 * var(--W));
    font-size:calc(var(--W) * .03)}
  .accueil-cabine .home-copy{left:calc(var(--ox) + .5 * var(--W));top:calc(var(--oy) + .175 * var(--H));width:calc(.9 * var(--W));padding:8px 12px!important}
  .accueil-cabine .home-intro br{display:none}
  .accueil-cabine .home-copy h1{font-size:clamp(24px,calc(var(--W) * .07),44px)}
  .accueil-cabine .home-intro{font-size:clamp(12px,calc(var(--W) * .029),17px);line-height:1.4}
  .accueil-cabine .home-footer{font-size:11px;justify-content:center}
  .accueil-cabine .home-footer>span{display:none}
}

/* ---------- Écran tactile : bulle qui montre la phrase de l'objet touché (accueil-cabine.js) ---------- */
.bulle-tactile{
  position:absolute;z-index:7;left:50%;top:calc(var(--oy) + .575 * var(--H));transform:translateX(-50%);
  width:min(88cqw,340px);padding:10px 16px 9px;border-radius:3px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,#f6e3a8,#d3ab5c 70%,#b58a3d);color:#2b1703;
  box-shadow:inset 0 1px #fff4c899,0 0 0 1px #4a2c0f,0 10px 24px #000c;animation:bulle .3s ease both}
.bulle-tactile[hidden]{display:none}
.bulle-tactile strong{display:block;font:italic 19px/1.2 var(--display)}
.bulle-tactile span{display:block;margin:4px 0 6px;font:14px/1.4 var(--body)}
.bulle-tactile em{display:block;font:italic 12.5px var(--body);color:#5a3510}
@keyframes bulle{from{opacity:0;transform:translate(-50%,8px)}}