/* Hauts Lieux — accueil.css — arrivée par une fiche, invitation, cadeau, message, partage (11 octobre 2026, version 2026-10-11-d).
   Les couleurs sont celles de la charte (polices.css : --granite-dark, --gold, --moss, --bracken, --paper, --mist). */

/* ---------- Le volet à demi ouvert ----------
   Même mécanique que #volet.open : la boîte glisse, la feuille porte le contre-déplacement. À moitié, la boîte est à -50 % de la
   largeur de la feuille, et la feuille à +50 % : son bord gauche reste fixe, c'est la lisière droite qui s'arrête à mi-chemin.
   La transition de #volet (0,85 s) fait le reste, à l'aller comme au retour : le repli est doux, devant le visiteur. */
#volet.entrouvert{ transform: translateX(calc(-0.5 * var(--panel-w))); }
#volet.entrouvert #panel{ transform: translateX(calc(0.5 * var(--panel-w))); cursor:pointer; }
#volet.entrouvert #panelHandle .ph-seal{ animation: accSceau 2.2s ease-in-out 3; }
/* Téléphone (< 760 px) : le cachet est centré par translate(-50%, -50%) ; l'animation doit le garder. */
@keyframes accSceau{ 0%,100%{ transform: translate(-50%, -50%) scale(1); } 50%{ transform: translate(-50%, -50%) scale(1.08); } }
@media (min-width: 760px){
  #volet.entrouvert #panelHandle .ph-seal{ animation: accSceauBureau 2.2s ease-in-out 3; }
  @keyframes accSceauBureau{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }
}

/* La bulle qui dit quoi faire : une phrase, à droite du rouleau. */
#voletIndice{
  position:fixed; z-index:650; max-width:min(190px, calc(100vw - 260px)); min-width:120px;
  background:var(--granite-dark); color:#fdfbf5; font-size:13px; line-height:1.35; font-weight:600;
  padding:9px 12px; border-radius:11px; box-shadow:0 6px 20px rgba(0,0,0,.32); cursor:pointer;
  opacity:0; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease;
}
#voletIndice.vu{ opacity:1; transform:none; }
#voletIndice::before{
  content:''; position:absolute; left:-7px; top:20px; border:7px solid transparent; border-left:0; border-right-color:var(--granite-dark);
}

/* La croix du volet : visible quand il est ouvert en grand, en haut à droite de la feuille. */
#closePanel{
  width:34px; height:34px; top:12px; right:10px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:24px; color:#6b6650;
}
#closePanel:hover{ background:rgba(120,95,50,.12); color:#2c2b26; }
#closePanel:focus-visible{ outline:2px solid #9c3b2e; outline-offset:2px; }
#volet.entrouvert #closePanel{ display:none; }

/* Le mode d'emploi se découvre : un point doré sur son bouton, tant qu'il n'a pas été ouvert. */
#aidePanelBtn.ma-btn{ position:relative; }
#aidePanelBtn.decouvrir::after{
  content:''; position:absolute; top:-2px; right:-2px; width:11px; height:11px; border-radius:50%;
  background:var(--gold); border:2px solid #faf7f0; animation: accPoint 2.4s ease-in-out infinite;
}
@keyframes accPoint{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.25); } }

#btnMessage.ma-btn{ color:var(--bracken); }
body.dossier-ouvert #btnMessage{ display:none; }

/* ---------- L'invitation à installer : la barre existante, avec la ligne du cadeau ---------- */
#barreInstall .bi-txt .bi-corps{ display:block; font-size:12px; opacity:.8; margin-top:2px; }
#barreInstall .bi-txt .bi-cadeau{ display:block; font-size:12.5px; margin-top:5px; color:#f0d9a5; font-weight:600; opacity:1; }
#barreInstall .bi-txt .bi-cadeau[hidden]{ display:none; }

/* ---------- Les feuilles qui montent du bas : partage, message, cadeau, installation sur iPhone ---------- */
.acc-feuille{ position:fixed; inset:0; z-index:6000; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.acc-feuille .acc-fond{ position:absolute; inset:0; background:rgba(20,19,16,.55); opacity:0; transition:opacity .25s ease; pointer-events:auto; }
.acc-feuille.montre .acc-fond{ opacity:1; }
.acc-feuille .acc-boite{
  position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; box-sizing:border-box; pointer-events:auto;
  background:linear-gradient(180deg, var(--granite-dark) 0%, #201f1b 100%); color:var(--stone-light, #f3efe4);
  border-radius:18px 18px 0 0; padding:22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -10px 40px rgba(0,0,0,.4); transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.acc-feuille.montre .acc-boite{ transform:none; }
@media (min-width: 760px){
  .acc-feuille{ align-items:center; }
  .acc-feuille .acc-boite{ border-radius:18px; transform:translateY(24px); opacity:0; transition:transform .25s ease, opacity .25s ease; }
  .acc-feuille.montre .acc-boite{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .acc-feuille .acc-fond, .acc-feuille .acc-boite{ transition:none; }
  #voletIndice{ transition:none; }
  #volet.entrouvert #panelHandle .ph-seal, #aidePanelBtn.decouvrir::after{ animation:none; }
}
.acc-x{ position:absolute; top:8px; right:10px; background:none; border:0; color:var(--mist); font-size:26px; line-height:1; cursor:pointer; width:40px; height:40px; }
.acc-titre{ font-family:'Cormorant SC', serif; font-weight:700; font-size:23px; margin:0 36px 10px 0; text-wrap:balance; color:#fdfbf5; }
.acc-texte{ font-size:14px; line-height:1.5; color:var(--mist); margin:0 0 12px; }
.acc-contexte{ font-size:12.5px; color:var(--gold); margin:-4px 0 10px; font-weight:600; }
.acc-fine{ font-size:11.5px; line-height:1.45; color:#a8a293; margin:12px 0 0; text-align:center; min-height:16px; }
.acc-cadeau{ font-size:14px; font-weight:600; color:#f0d9a5; margin:4px 0 12px; }
.acc-etapes{ margin:0 0 10px; padding-left:22px; font-size:14px; line-height:1.55; color:#fdfbf5; }
.acc-etapes li{ margin:4px 0; }
.acc-actions{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.acc-btn{ width:100%; border-radius:10px; padding:13px; font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer; border:1px solid var(--gold); background:none; color:var(--gold); }
.acc-btn.primaire{ background:var(--gold); color:#2c2b26; }
.acc-btn:hover{ opacity:.9; }
.acc-btn:disabled{ opacity:.55; cursor:default; }
.acc-btn:focus-visible, .acc-cle:focus-visible, .acc-res:focus-visible, .acc-x:focus-visible{ outline:2px solid #f0d9a5; outline-offset:2px; }

/* Les trois clés du cadeau */
.acc-cles{ display:flex; flex-direction:column; gap:8px; }
.acc-cle{
  text-align:left; border:1px solid rgba(184,134,59,.55); background:rgba(255,255,255,.05); color:#fdfbf5; border-radius:12px;
  padding:11px 13px; font-family:inherit; cursor:pointer; display:flex; flex-direction:column; gap:3px;
}
.acc-cle b{ font-size:15px; color:#f0d9a5; }
.acc-cle span{ font-size:12.5px; line-height:1.4; color:var(--mist); }
.acc-cle:hover:not(:disabled){ background:rgba(184,134,59,.16); }
.acc-cle:disabled{ opacity:.55; }

/* Le formulaire du message */
.acc-form{ display:flex; flex-direction:column; gap:10px; }
.acc-form textarea, .acc-form input[type=email]{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:15px; color:#2c2b26; background:#faf7f0;
  border:1px solid #d9d0bd; border-radius:10px; padding:11px 12px;
}
.acc-form textarea{ resize:vertical; min-height:110px; line-height:1.45; }
.acc-form textarea:focus, .acc-form input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.acc-piege{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.acc-etat{ min-height:18px; font-size:13px; color:var(--mist); }
.acc-etat.ok{ color:#9fd08a; font-weight:600; }
.acc-etat.erreur{ color:#f1a08e; }

/* Le partage */
.acc-partage-nom{ font-size:14px; color:#fdfbf5; font-weight:600; margin:0 0 12px; line-height:1.35; }
.acc-reseaux{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.acc-res{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:12px; text-decoration:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#fdfbf5; font-size:12.5px; font-weight:600;
}
.acc-res i{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:17px; font-weight:700; color:#fff; font-family:Georgia, serif; }
.acc-res:hover{ background:rgba(255,255,255,.1); }

/* Le bouton « Partager » en haut des pages pleines (dossiers, histoires, pages de lieu) */
#dossierPage .dp-partager{
  position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:58px; z-index:3; height:36px; padding:0 14px; border-radius:18px; cursor:pointer;
  border:0; background:rgba(250,247,240,.92); color:#2c2b26; font-family:inherit; font-size:13px; font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.25); display:flex; align-items:center; gap:6px;
}
#dossierPage .dp-partager[hidden]{ display:none; }
#dossierPage .dp-partager svg{ width:16px; height:16px; }
#dossierPage.defile .dp-partager{ background:#2c2b26; color:#faf7f0; }

/* Un dossier retrouvé par une adresse partagée s'éclaire un instant. */
.dossier.acc-flash{ animation: accFlash 2.4s ease-out 1; }
@keyframes accFlash{ 0%{ box-shadow:0 0 0 3px rgba(184,134,59,.9); } 100%{ box-shadow:0 0 0 3px rgba(184,134,59,0); } }

/* « Écrire à l'éditeur » dans le pied du volet : un lien sobre, toujours à portée, même fiche ouverte. */
#msgPanelBtn.acc-lien{
  display:block; margin:6px auto 2px; padding:8px 12px; background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--bracken); text-decoration:underline; text-underline-offset:3px;
}
#msgPanelBtn.acc-lien:hover{ color:#2c2b26; }