/* Liste d’envies (ticket I6, lot B) : bouton « Garder », lien « Voir mes envies » et message. Feuille de l’agent Boutons.
   Un bouton garde l’apparence de sa classe hôte (classe passée à garderBouton : fiche-essentiel-add, geo-mark,
   save-place…), dont les règles passent après celle-ci. L’apparence propre du bouton (maquette panier/Panier.dc.html)
   ne vise donc que les boutons sans hôte, reconnus à leur attribut class exact. Couleurs : encre #101e26, safran
   #F6A72D (#B26A00 pour le focus), fond pressé #FFF6E6, gris #C8D1D8. */

/* Texte lu par les lecteurs d’écran seulement : nom du bouton (« Garder Djanet »), région annoncée. */
.envies-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* Signet : contour au repos, plein safran quand l’envie est gardée (un hôte peut le régler autrement). */
.envies-signet{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
[aria-pressed="true"]>.envies-signet{fill:#F6A72D}
.envies-garder:focus-visible,.envies-voir:focus-visible{outline:2px solid #B26A00;outline-offset:2px}

/* Bouton sans hôte : 44 px au moins, libellé fixe, état par aria-pressed (bordure safran, fond #FFF6E6). */
:is([class="envies-garder"],[class="envies-garder envies-garder--icone"]){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid #101e26;background:#FFF;color:#101e26;font:600 12px/1.2 Poppins,sans-serif;white-space:nowrap;cursor:pointer;transition:background .2s ease,border-color .2s ease}
[class="envies-garder envies-garder--icone"]{width:44px;height:44px;padding:0;border-color:#C8D1D8}
:is([class="envies-garder"],[class="envies-garder envies-garder--icone"]):hover{border-color:#F6A72D}
:is([class="envies-garder"],[class="envies-garder envies-garder--icone"])[aria-pressed="true"]{border-color:#F6A72D;background:#FFF6E6}

/* Lien « Voir mes envies » sans hôte : signet plein ; masqué tant que la liste est vide. */
[class="envies-voir"]{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;font:600 12px/1.2 Poppins,sans-serif;white-space:nowrap;cursor:pointer}
.envies-voir>.envies-signet{width:14px;height:14px;fill:#F6A72D;stroke:#0b0c0d}
.envies-voir[hidden]{display:none!important}

/* Hôtes du prototype (explorer/styles.css, pages/discover.css : chargées après cette feuille). */
.secondary-button.envies-garder{justify-content:center;gap:10px}
.secondary-button.envies-garder>.envies-garder-libelle{font-size:inherit;font-weight:inherit}
.secondary-button.envies-garder[aria-pressed="true"]{border-color:#F6A72D;background:#FFF6E6;color:#101e26}
.save-place.envies-garder{width:44px;height:44px}
.discover-pick.envies-garder{min-height:44px}

/* Listes /regions, /villes, /lieux : le signet se pose sur la carte, à côté de son lien. */
.pg-catalogue-card-wrap:has(>.envies-garder){position:relative}
.pg-catalogue-card-wrap>.pg-card+.envies-garder{position:absolute;top:12px;right:12px;z-index:1}
.pg-catalogue-card-wrap>.pg-card--text:has(+.envies-garder) .pg-card-copy{padding-right:68px}
.pg-catalogue-card-wrap>.pg-region-row:has(+.envies-garder){padding-right:60px}
.pg-catalogue-card-wrap>.pg-region-row+.envies-garder{position:absolute;top:50%;right:0;transform:translateY(-50%)}
/* Liste /voyages : le signet du circuit, juste avant « Découvrir ». */
.voyage-card-bottom>.envies-garder{margin-left:auto;flex:none}

/* Message après un clic : en bas au centre, au-dessus du tiroir des haltes (.geo-tiroir, 1100) et des barres fixes. */
.envies-message{position:fixed;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:1200;box-sizing:border-box;width:fit-content;max-width:640px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;padding:6px 4px 6px 16px;background:#101e26;color:#FFF;font:400 12.5px/1.5 Poppins,sans-serif;text-align:left;box-shadow:0 18px 40px -20px rgba(16,30,38,.6);animation:envies-monte .3s ease both}
.envies-message-texte{flex:1 1 auto;min-width:0;margin:0;padding:6px 0;color:#FFF;font:inherit}
.envies-message-action{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:#F6A72D;font:600 12.5px/1.3 Poppins,sans-serif;text-align:left;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.envies-message-action:hover{color:#FFC871}
.envies-message-fermer{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:auto;padding:0;border:0;background:none;color:#FFF;font:400 22px/1 Poppins,sans-serif;cursor:pointer}
.envies-message :focus-visible{outline:2px solid #F6A72D;outline-offset:2px}
@keyframes envies-monte{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  .envies-message{animation:none}
  :is([class="envies-garder"],[class="envies-garder envies-garder--icone"]){transition:none}
}
/* Téléphone : au-dessus de la barre d’action des fiches et de celle des voyages. */
@media (max-width:720px){
  body:has(.fiche-essentiel.has-actions) .envies-message{bottom:calc(104px + env(safe-area-inset-bottom))}
}
@media (max-width:700px){
  body:has(.circuit-mobile-action:not([hidden])) .envies-message{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* Tiroir des haltes ouvert (fiches) : le message ne couvre pas ses boutons. Panneau à droite (480 px) : centré sur la
   page qu’il laisse visible ; feuille du bas en mobile : en haut de l’écran, au-dessus d’elle. */
@media (min-width:721px){
  body:has(.geo-tiroir>.geo-tiroir-aside) .envies-message{right:496px}
}
@media (max-width:720px){
  body:has(.geo-tiroir>.geo-tiroir-aside) .envies-message{top:calc(16px + env(safe-area-inset-top));bottom:auto}
}
/* Téléphone, barre « L’essentiel » dépliée (jusqu’à 260 px de haut) : le message passe en haut de l’écran, au-dessus
   de ses repères et de ses liens. Même place dans une fenêtre modale (aperçu d’un lieu de l’explorer), dont les liens
   sont en bas, mais à gauche de son bouton de fermeture (44 px, en haut à droite). Le tiroir du panier, lui, lui
   réserve une place (panier.css). */
@media (max-width:720px){
  body:has(.fiche-essentiel.has-actions.is-open)>.envies-message,
  body:has(dialog[open]) dialog[open]>.envies-message{top:calc(16px + env(safe-area-inset-top));bottom:auto}
  body:has(dialog[open]) dialog[open]>.envies-message{right:76px}
}