/* Trio, le chat qui trouve votre sortie (public/js/sortie-bot.js) : bouton rond, bulle d'accroche, fenêtre de discussion, cartes
   des sorties proposées. Chargé après style.css (templates/base.html.twig). Sorti de style.css le 13/11/2026. */
/* ---------- « Alexandre », le chat qui trouve votre sortie (public/js/sortie-bot.js, 12/11/2026) ---------- */
/* Bouton : la photo d'Alexandre, pastille verte « en ligne », pastille rouge quand il a un message. */
.sb-bouton{position:fixed;right:18px;bottom:calc(20px + var(--sb-dessus,0px));z-index:46;width:64px;height:64px;padding:0;border:3px solid #fff;border-radius:50%;background:var(--surface);cursor:pointer;box-shadow:0 8px 24px rgba(14,27,43,.28);transition:transform .2s}
.sb-bouton img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sb-bouton:hover{transform:scale(1.06)}
.sb-bouton:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sb-en-ligne{position:absolute;right:1px;bottom:3px;width:14px;height:14px;border-radius:50%;background:#22C55E;border:2px solid #fff}
.sb-pastille{position:absolute;top:-4px;right:-4px;box-sizing:border-box;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#E5233B;color:#fff;font:800 12px/1 var(--titre);display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.sb-pastille[hidden]{display:none}
/* Bulle de discussion au-dessus de la photo, sa pointe vers elle ; un faux champ « Répondre à Alexandre… » montre que c'est un chat. */
.sb-accroche{position:fixed;right:96px;bottom:calc(20px + var(--sb-dessus,0px));z-index:46;width:280px;max-width:calc(100vw - 120px);padding:11px 30px 11px 14px;border-radius:18px 18px 6px 18px;background:var(--surface);color:var(--encre);border:1px solid var(--filet);box-shadow:0 12px 32px rgba(14,27,43,.22);cursor:pointer;animation:sb-monte .35s ease-out}
.sb-accroche::after{content:"";position:absolute;right:-9px;bottom:18px;width:16px;height:16px;background:var(--surface);border-right:1px solid var(--filet);border-top:1px solid var(--filet);transform:rotate(45deg)}
.sb-accroche[hidden]{display:none}
.sb-accroche:hover{border-color:var(--accent-fond)}
.sb-accroche:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sb-accroche-qui{margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;line-height:1.25}
.sb-accroche-qui b{font:700 var(--t-s) var(--titre)}
.sb-accroche-qui span{font:700 var(--t-xs) var(--titre);color:#E5233B}
.sb-accroche-texte{margin:0;font-size:var(--t-s);line-height:1.4}
.sb-accroche-fermer{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--doux);font-size:18px;line-height:1;cursor:pointer}
.sb-accroche-fermer:hover{background:var(--gris)}
/* Petite bulle de chat sur la photo. */

body.a-bot .bulle-haut{right:24px;bottom:calc(96px + var(--sb-dessus,0px))}
body.a-bot.a-bouton-carte .bulle-haut{right:18px;bottom:calc(90px + var(--sb-dessus,0px))}
body.a-bot.a-bouton-carte .sb-bouton{right:82px}
body.a-bot.a-bouton-carte .sb-accroche{right:160px;max-width:calc(100vw - 184px)}
/* Bouton carte effacé pendant la descente (téléphone) : la photo et sa bulle glissent dans le coin. */
.sb-bouton{transition:transform .2s,right .25s}
.sb-accroche{transition:right .25s}
body.a-bot.a-bouton-carte:has(.pill-carte.pill-cachee) .sb-bouton{right:18px}
body.a-bot.a-bouton-carte:has(.pill-carte.pill-cachee) .sb-accroche{right:96px;max-width:calc(100vw - 120px)}
@keyframes sb-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* La fenêtre de discussion. */
.sb-fenetre{position:fixed;right:18px;bottom:calc(96px + var(--sb-dessus,0px));z-index:80;width:min(390px,calc(100vw - 24px));height:min(660px,calc(100vh - 126px - var(--sb-dessus,0px)));display:flex;flex-direction:column;background:var(--surface);color:var(--encre);border-radius:20px;box-shadow:0 18px 50px rgba(14,27,43,.32);overflow:hidden;animation:sb-monte .25s ease-out}
.sb-fenetre[hidden]{display:none}
.sb-integre{position:static;width:auto;max-width:720px;height:min(700px,80vh);margin:24px auto 48px;border:1px solid var(--filet);box-shadow:var(--ombre);animation:none}
.sb-tete{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;background:#0E1B2B;color:#fff}
.sb-avatar{position:relative;flex:none;width:28px;height:28px}
.sb-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sb-avatar-tete{width:44px;height:44px}
.sb-avatar-tete i{position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;background:#22C55E;border:2px solid #0E1B2B}
.sb-titre{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;line-height:1.25}
.sb-titre b{font:700 var(--t-m) var(--titre)}
.sb-titre span{font-size:var(--t-xs);opacity:.75}
.sb-icone{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.sb-icone:hover{background:rgba(255,255,255,.14)}
.sb-icone svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sb-fil{flex:1;overflow-y:auto;padding:16px 12px 8px;display:flex;flex-direction:column;gap:6px;background:var(--fond)}
.sb-ligne{display:flex;align-items:flex-end;gap:8px;animation:sb-monte .2s ease-out}
.sb-moi{justify-content:flex-end}
.sb-bulle{max-width:82%;margin:0;padding:9px 13px;border-radius:18px 18px 18px 6px;background:var(--surface);border:1px solid var(--filet);font-size:var(--t-s);line-height:1.45}
.sb-moi .sb-bulle{border-radius:18px 18px 6px 18px;background:var(--accent-fond);color:var(--accent-texte);border-color:transparent}
.sb-large{max-width:calc(100% - 36px);flex:1;padding:6px}
.sb-ecrit .sb-bulle{color:var(--doux);font-size:var(--t-xs);display:flex;align-items:center;gap:6px}
.sb-points{display:inline-flex;gap:3px}
.sb-points i{width:6px;height:6px;border-radius:50%;background:var(--doux);animation:sb-saute 1.1s infinite}
.sb-points i:nth-child(2){animation-delay:.15s}
.sb-points i:nth-child(3){animation-delay:.3s}
@keyframes sb-saute{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
/* Réponses rapides et saisie. */
.sb-choix{padding:8px 12px 6px;background:var(--fond);display:flex;flex-direction:column;gap:6px;max-height:55%;overflow-y:auto}
.sb-choix:empty{display:none}
.sb-options{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.sb-option{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1.5px solid var(--accent-fond);border-radius:999px;background:var(--surface);color:var(--encre);font:600 var(--t-s) var(--titre);cursor:pointer}
.sb-option:hover{background:var(--accent-fond);color:var(--accent-texte)}
.sb-option:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sb-option small{font-weight:600;font-size:var(--t-xs);opacity:.65}
.sb-option svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sb-option-neutre{border-style:dashed;border-color:var(--filet)}
.sb-ici,.sb-valider{background:var(--accent-fond);color:var(--accent-texte)}
.sb-villes{justify-content:flex-start}
.sb-lieu{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.sb-lien{align-self:flex-end;padding:2px;border:0;background:none;color:var(--lien-bleu);font:600 var(--t-xs) var(--titre);text-decoration:underline;cursor:pointer}
.sb-saisie{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--filet);background:var(--surface)}
.sb-champ{flex:1;min-width:0;min-height:42px;padding:8px 16px;border:1px solid var(--bord-champ);border-radius:999px;background:var(--fond);color:var(--encre);font-family:inherit;font-size:16px;line-height:1.3}
.sb-champ:focus{outline:2px solid var(--focus);outline-offset:1px}
.sb-date{flex:0 1 200px;background:var(--surface)}
.sb-envoyer{flex:none;width:42px;height:42px;border:0;border-radius:50%;background:var(--accent-fond);color:var(--accent-texte);display:grid;place-items:center;cursor:pointer}
.sb-envoyer svg{fill:currentColor}
.sb-envoyer:hover{background:var(--accent-survol)}
/* Les sorties proposées. */
.sb-sorties{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:sb}
.sb-sortie a{position:relative;display:flex;gap:12px;align-items:flex-start;padding:8px;border-radius:12px;color:var(--encre);text-decoration:none;counter-increment:sb}
.sb-sortie a:hover{background:var(--gris)}
.sb-sortie a::before{content:counter(sb);position:absolute;left:4px;top:4px;z-index:1;width:22px;height:22px;border-radius:50%;background:#111;color:#FFD400;font:800 12px/22px var(--titre);text-align:center}
.sb-sortie img{flex:none;width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--gris)}
.sb-sortie-texte{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--t-xs);line-height:1.35}
.sb-sortie-texte b{font:700 var(--t-s)/1.3 var(--titre);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-sortie-quand{font-weight:700;color:var(--accent-fond)}
.sb-sortie-lieu{color:var(--doux)}
.sb-sortie-pourquoi{margin-top:2px;color:var(--vert-texte)}

.sb-partenaire a{box-shadow:inset 0 0 0 2px #FFD400}
@media (max-width:560px){
  .sb-fenetre:not(.sb-integre){right:0;left:0;bottom:0;width:100%;height:100dvh;border-radius:0}
  body.sb-ouvert .sb-bouton,body.sb-ouvert .bulle-haut,body.sb-ouvert .sb-accroche{display:none}
  .sb-accroche{width:auto;left:12px}
  .sb-integre{height:78vh;margin:16px 0 32px}
}
@media (prefers-reduced-motion:reduce){.sb-ligne,.sb-fenetre,.sb-accroche{animation:none}.sb-points i{animation:none}}
/* ---------- Bot Alexandre aux couleurs du site (12/11/2026, demande d'Alexandre) : coins alternés (--forme), filet léger et ombre
   des blocs, petit filet aux trois couleurs du logo en haut (comme l'agenda), titres en Bricolage Grotesque, rouge de la ligne 1. ---------- */
.sb-accroche{border-radius:var(--forme-m);border:1px solid color-mix(in srgb,var(--filet) 70%,transparent);box-shadow:var(--ombre-carte),0 14px 30px -12px rgba(14,27,43,.22);padding:16px 34px 14px 16px}
.sb-accroche::before,.sb-tete::before{content:"";position:absolute;top:0;left:18px;width:48px;height:4px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--l1) 0 33.3%,var(--l2) 33.3% 66.6%,#F2B705 66.6%)}
.sb-accroche::after{border-color:color-mix(in srgb,var(--filet) 70%,transparent)}
.sb-accroche:hover{border-color:var(--encre)}
.sb-accroche-qui b,.sb-titre b{font:800 var(--t-base) var(--display);letter-spacing:-.015em;color:var(--encre)}
.sb-accroche-qui span,.sb-titre span.sb-titre-rouge{font:700 var(--t-s) var(--display);color:var(--l1);opacity:1}
.sb-accroche-texte{color:var(--texte);line-height:1.5}
.sb-fenetre{border-radius:var(--forme);border:1px solid color-mix(in srgb,var(--filet) 70%,transparent);box-shadow:var(--ombre)}
.sb-tete{position:relative;background:var(--surface);color:var(--encre);border-bottom:1px solid var(--filet);padding:14px 10px 12px 16px}
.sb-titre{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.sb-titre span.sb-titre-auto{flex-basis:100%;font-size:11px;color:var(--doux);opacity:1}
.sb-avatar-tete i{border-color:var(--surface)}
.sb-icone{color:var(--encre)}
.sb-icone:hover{background:var(--gris)}
.sb-fil{background:var(--fond-page)}
.sb-bulle{border-radius:var(--forme-s);border-color:color-mix(in srgb,var(--filet) 70%,transparent);box-shadow:var(--ombre-douce);color:var(--texte)}
.sb-moi .sb-bulle{border-radius:4px 12px 4px 12px;box-shadow:none}
.sb-large{padding:8px}
.sb-choix{background:var(--fond-page)}
.sb-option{border-radius:var(--forme-s);border:1px solid var(--encre);font:700 var(--t-s) var(--titre)}
.sb-option-neutre{border:1px dashed var(--bord-champ)}
.sb-champ{border-radius:var(--forme-s)}
.sb-envoyer{border-radius:var(--forme-s)}
.sb-sortie a{border-radius:var(--forme-s)}
.sb-sortie img{border-radius:var(--forme-s)}
.sb-sortie-texte b{font:800 var(--t-s)/1.3 var(--display);letter-spacing:-.01em}
/* Bulle à gauche de la photo : sans bordure (demande d'Alexandre du 12/11/2026), l'ombre seule la détache de la page. */
.sb-accroche,.sb-accroche:hover{border:0}
.sb-accroche::after{border:0;box-shadow:3px -3px 6px -3px rgba(14,27,43,.12)}
/* Carte ouverte : Alexandre reste visible au-dessus de la carte (demande d'Alexandre du 12/11/2026), à gauche du bouton « Afficher la liste ». */
body.carte-ouverte .sb-bouton,body.carte-ouverte .sb-accroche{z-index:81}
body.carte-ouverte .sb-fenetre{z-index:85}
/* Survol du bouton carte : la photo glisse vers la gauche au rythme du bouton qui s'élargit (--sb-decalage, posé par sortie-bot.js). */
body.a-bot.a-bouton-carte .sb-bouton{right:calc(82px + var(--sb-decalage,0px));transition:transform .2s,right .3s cubic-bezier(.2,.8,.2,1)}
/* Bouton de Trio (12/11/2026) : même taille et même fond noir que le bouton carte ; le billet jaune ressort mieux. */
.sb-bouton{width:52px;height:52px;bottom:calc(26px + var(--sb-dessus,0px));border:0;background:#111;box-shadow:var(--ombre)}
.sb-bouton img{background:transparent;padding:7px;border-radius:0}
.sb-bouton:hover{background:#333;transform:none}
.sb-en-ligne{right:-1px;bottom:1px;width:12px;height:12px}

.sb-pastille{top:-6px;right:-6px}
.sb-accroche{bottom:calc(26px + var(--sb-dessus,0px))}
body.a-bot.a-bouton-carte .sb-bouton{right:82px}
/* Rond de Trio en bas à droite : fond blanc (13/11/2026), filet léger pour le détacher de la page. */
.sb-bouton{background:#fff;border:1px solid var(--filet)}
.sb-bouton:hover{background:var(--gris)}
/* Lien vers une page du site dans un message de Trio (13/11/2026). */
.sb-page{display:inline-block;margin-top:6px;padding:5px 10px;border-radius:var(--forme-s);background:color-mix(in srgb,var(--l2) 10%,var(--surface));color:var(--l2);font:700 var(--t-s)/1.3 var(--titre);text-decoration:none}
.sb-page:hover{background:var(--l2);color:#fff}
/* Rond de Trio : contour rouge du logo (demande d'Alexandre, 13/11/2026). */
.sb-bouton{border:2px solid var(--l1)}
/* « Remonter » exactement au-dessus du rond de Trio (même bord droit, même taille, 12 px d'écart), avec ou sans bouton carte, sur
   tous les écrans (demande d'Alexandre, 13/11/2026 : ils étaient décalés de 6 px sur les pages sans carte). */
body.a-bot .bulle-haut{right:18px;bottom:calc(90px + var(--sb-dessus,0px));width:52px;height:52px}
/* Bouton d'envoi du chat : rouge du logo (demande d'Alexandre, 13/11/2026). */
.sb-envoyer{background:var(--l1);color:#fff}
.sb-envoyer:hover{background:#C20025}
/* Cartes des sorties (demande d'Alexandre, 13/11/2026) : l'étiquette (Cinéma, Parc, Jeu de société, Partenaire) devant le titre, plus de
   ligne en bas : toutes les cartes font la même hauteur. Le cadre jaune ne reste que pour un lien vers un partenaire. */
.sb-tag{display:inline-block;vertical-align:2px;margin-right:2px;padding:1px 7px;border-radius:999px;background:var(--gris);color:var(--encre);font:700 10px/1.5 var(--titre);font-style:normal;letter-spacing:.02em;text-transform:uppercase}
.sb-tag-partenaire{background:#FFD400;color:#111}
/* « Pas pour moi » : petite croix dans le coin de la carte, visible au survol (toujours visible au doigt). */
.sb-sortie{position:relative}
.sb-sortie a{padding-right:30px}
.sb-pas{position:absolute;top:6px;right:6px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--gris);color:var(--doux);font:700 15px/22px var(--titre);cursor:pointer;opacity:.55;transition:opacity .15s,background .15s,color .15s}
.sb-sortie:hover .sb-pas,.sb-pas:focus-visible{opacity:1}
.sb-pas:hover{background:var(--l1);color:#fff}
/* Même hauteur pour toutes les cartes : le lieu tient sur une ligne (coupé par « … »), la raison sur deux au plus. */
.sb-sortie-lieu,.sb-sortie-quand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sortie-pourquoi{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Ombre sous les boutons flottants (bouton Trio, fenêtre de Trio, « remonter en haut », « Afficher la carte »), pour qu'on les voie mieux
   sur toutes les pages (demande d'Alexandre, 13/11/2026). Un liseré net sous le bouton, puis une ombre large ; « body » devant le
   sélecteur pour passer devant les règles de style.css et des écrans étroits. */
:root{--ombre-bouton:0 2px 3px rgba(14,27,43,.30),0 8px 18px rgba(14,27,43,.32);--ombre-fenetre:0 4px 8px rgba(14,27,43,.18),0 20px 48px rgba(14,27,43,.38)}
:root[data-theme="dark"]{--ombre-bouton:0 2px 3px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.6);--ombre-fenetre:0 4px 8px rgba(0,0,0,.45),0 20px 48px rgba(0,0,0,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ombre-bouton:0 2px 3px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.6);--ombre-fenetre:0 4px 8px rgba(0,0,0,.45),0 20px 48px rgba(0,0,0,.7)}}
body .sb-bouton,body .bulle-haut,body .pill-carte{box-shadow:var(--ombre-bouton)}
body .sb-fenetre{box-shadow:var(--ombre-fenetre)}

/* Bouton de Trio : un halo rouge qui part du contour et s'efface (deux ondes, puis une pause), et la mascotte qui grossit un peu à chaque onde
   (au lieu d'un saut du bouton, jugé trop agité),
   pour attirer l'œil sans gêner (demande d'Alexandre du 13/11/2026). Tout s'arrête dès que Trio a été ouvert pendant la visite
   (.sb-calme, posée par sortie-bot.js), et pour qui demande moins d'animations. */
.sb-bouton::before,.sb-bouton::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--l1,#E4002B);opacity:0;pointer-events:none;animation:sb-halo 4.2s cubic-bezier(.2,.6,.3,1) 2s infinite}
.sb-bouton::after{animation-delay:2.45s}
.sb-bouton img{animation:sb-respire 4.2s ease-in-out 2s infinite}
@keyframes sb-halo{0%{transform:scale(1);opacity:.6}38%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
@keyframes sb-respire{0%{transform:scale(1)}9%{transform:scale(1.16)}22%{transform:scale(1)}30%{transform:scale(1.08)}40%,100%{transform:scale(1)}}
.sb-bouton.sb-calme img,.sb-bouton:hover img{animation:none}
.sb-bouton.sb-calme::before,.sb-bouton.sb-calme::after{animation:none;opacity:0}
body.sb-ouvert .sb-bouton::before,body.sb-ouvert .sb-bouton::after{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){.sb-bouton img,.sb-bouton::before,.sb-bouton::after{animation:none}}