/* z-index au-dessus du bouton "retour en haut" (footer.css, z-index:200)
   : le panneau ne doit jamais passer derrière ce bouton, même
   furtivement pendant une transition. Empilement vertical réglé côté
   footer.css, qui calcule sa position à partir de celle-ci. */
.ofa{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:210;font-family:var(--ff-body);}

.ofa__bulle{
	width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
	background:var(--teal-800);color:#fff;display:flex;align-items:center;justify-content:center;
	box-shadow:0 14px 30px -12px rgba(14,30,30,.45);transition:background .2s,transform .2s;
}
.ofa__bulle:hover{background:var(--teal-900);transform:translateY(-2px)}
.ofa__bulle-ico{width:26px;height:26px}

.ofa__bulle.is-cligne .ofa__bulle-ico{animation:ofa-cligne .5s var(--ease)}
@keyframes ofa-cligne{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}
@media(prefers-reduced-motion:reduce){
	.ofa__bulle.is-cligne .ofa__bulle-ico{animation:none}
	.ofa__bulle{transition:none}
}

.ofa__panel{
	position:absolute;right:0;bottom:72px;width:min(360px,calc(100vw - 32px));
	max-height:min(70vh,560px);display:flex;flex-direction:column;
	background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
	box-shadow:0 30px 60px -24px rgba(14,30,30,.5);overflow:hidden;
}
.ofa__panel[hidden]{display:none}

.ofa__head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;background:var(--teal-900);color:#fff}
.ofa__titre{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.ofa__fermer{background:none;border:none;color:#fff;font-size:.78rem;cursor:pointer;padding:.2rem .4rem;opacity:.85}
.ofa__fermer:hover{opacity:1}

.ofa__banniere{margin:0;padding:.6rem 1.1rem;background:var(--paper);color:var(--ink-45);font-size:.7rem;line-height:1.5;border-bottom:1px solid var(--line)}

.ofa__corps{padding:1rem 1.1rem;overflow-y:auto;flex:1}
.ofa__accueil{color:var(--ink-70);font-size:.88rem;line-height:1.55;margin:0 0 .9rem}

.ofa__menu{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0}
.ofa__item{
	width:100%;text-align:left;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r);
	background:#fff;color:var(--ink);font-size:.86rem;cursor:pointer;transition:border-color .2s,background .2s;
}
.ofa__item:hover{border-color:var(--teal-600);background:var(--teal-050)}

.ofa__retour{background:none;border:none;color:var(--teal-800);font-size:.8rem;cursor:pointer;padding:0;margin-bottom:.8rem}
.ofa__retour:hover{text-decoration:underline}
.ofa__label{font-weight:600;color:var(--ink);margin:0 0 .5rem;font-size:.92rem}
.ofa__texte{color:var(--ink-70);font-size:.86rem;line-height:1.6;margin:0 0 1rem;white-space:pre-line}

.ofa__actions{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0}
.ofa__action{
	display:block;padding:.65rem .9rem;border-radius:var(--r);background:var(--teal-800);color:#fff;
	font-size:.85rem;text-align:center;text-decoration:none;transition:background .2s;
}
.ofa__action:hover{background:var(--teal-900)}

.ofa__vert{margin:0;padding:.6rem 1.1rem;background:var(--paper);color:var(--ink-70);font-size:.74rem;font-family:var(--ff-mono);border-top:1px solid var(--line)}
.ofa__vert[hidden]{display:none}

@media(max-width:480px){
	.ofa__panel{position:fixed;right:16px;left:16px;bottom:88px;width:auto}
}