/* C2-759 — Le pied de page légal (templates/_pied_legal.html) et la liste des mêmes liens dans les Réglages (legal-links.js).
   Aucune couleur propre : le texte hérite de la page (thème clair ou sombre, application ou pages de compte). Cibles de 44 px. */
.pl-footer{position:relative;z-index:1;box-sizing:border-box;max-width:72rem;margin:2rem auto 0;padding:1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom,0px));border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:.8125rem;line-height:1.55;color:inherit}
.pl-links{display:flex;flex-wrap:wrap;gap:0 1.25rem}
.pl-link{display:inline-flex;align-items:center;min-height:2.75rem;color:inherit;opacity:.8;text-decoration:underline;text-underline-offset:.2em}
.pl-link:hover,.pl-link:focus-visible{opacity:1}
.pl-summary{list-style:none;display:inline-flex;align-items:center;min-height:2.75rem;cursor:pointer;opacity:.8;text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.pl-summary::-webkit-details-marker{display:none}
.pl-summary::after{content:'';width:.4em;height:.4em;margin-left:.45em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-.1em)}
.pl-mediation-box[open]>.pl-summary::after{transform:rotate(-135deg)}
.pl-summary:hover,.pl-summary:focus-visible,.pl-mediation-box[open]>.pl-summary{opacity:1}
.pl-mediation{margin:.25rem 0 .5rem;max-width:60rem;opacity:.8;overflow-wrap:anywhere}
.pl-mediation a{color:inherit;text-decoration:underline}
.legal-links{display:flex;flex-direction:column;margin-top:.75rem;padding-top:.5rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.legal-links strong{font-size:.9rem;font-weight:600;opacity:.75}
.legal-links a{display:flex;align-items:center;min-height:2.75rem;color:inherit;text-decoration:underline;text-underline-offset:.2em}
@media (max-width:540px){.pl-footer{padding-inline:1rem}.pl-links{flex-direction:column}}

/* C2-774 : dans les écrans plein écran (#app fixe : parcours en cartes, échange), le pied ne suit plus #app dans le flux : il
   s'affichait en haut de la page, par-dessus le fil d'Ariane. Il devient une ligne fixe en bas de la fenêtre, aux couleurs de la page ;
   app.js retire sa hauteur à --scene-height (drapeau --pl-reserve:1) : la scène, les boîtes de dialogue et les boutons du bas
   s'arrêtent au-dessus. La mention du médiateur s'ouvre en panneau au-dessus de la ligne. Sous 1000 px, avec la bande de Watson
   (watson-place.css : #app s'arrête au-dessus d'elle, y compris les pages qui défilent), la ligne tient dans la bande, à gauche
   de Watson : la scène ne perd rien (--pl-reserve:0). */
body.in-deck .pl-footer,body.in-interaction .pl-footer{--pl-reserve:1;position:fixed;z-index:20;left:0;right:0;bottom:0;margin:0;max-width:none;display:flex;align-items:center;gap:0 1rem;flex-wrap:wrap;min-height:2.25rem;padding:.125rem max(1rem,env(safe-area-inset-right,0px)) calc(.125rem + var(--wat-safe-bottom,env(safe-area-inset-bottom,0px))) max(1rem,env(safe-area-inset-left,0px));border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);background:var(--paper,Canvas);color:var(--ink,CanvasText);line-height:1.3}
body.in-deck .pl-links,body.in-interaction .pl-links{flex-flow:row wrap;gap:0 1rem;min-width:0}
body.in-deck .pl-mediation-box,body.in-interaction .pl-mediation-box{flex:none}
body.in-deck .pl-mediation,body.in-interaction .pl-mediation{position:absolute;left:.5rem;right:.5rem;bottom:100%;max-width:none;margin:0;padding:.75rem 1rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:.75rem .75rem 0 0;background:var(--paper,Canvas);opacity:1;max-height:50dvh;overflow-y:auto}
body.in-interaction .pl-footer{background:var(--call,#232627);color:var(--call-ink,#f5f7f2)}
body.in-interaction .pl-mediation{background:var(--call,#232627)}
@media (max-width:999.98px){
:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-footer{--pl-reserve:1;position:fixed;z-index:20;left:0;right:0;bottom:0;margin:0;max-width:none;display:flex;align-items:center;gap:0 1rem;flex-wrap:wrap;min-height:2.25rem;padding:.125rem max(1rem,env(safe-area-inset-right,0px)) calc(.125rem + var(--wat-safe-bottom,env(safe-area-inset-bottom,0px))) max(1rem,env(safe-area-inset-left,0px));border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);background:var(--paper,Canvas);color:var(--ink,CanvasText);line-height:1.3}
:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-links{flex-flow:row wrap;gap:0 1rem;min-width:0}
:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-mediation-box{flex:none}
:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-mediation{position:absolute;left:.5rem;right:.5rem;bottom:100%;max-width:none;margin:0;padding:.75rem 1rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:.75rem .75rem 0 0;background:var(--paper,Canvas);opacity:1;max-height:50dvh;overflow-y:auto}
:root[data-watson-corner=on] body.in-deck .pl-footer,:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-footer{--pl-reserve:0;right:calc(var(--wat-size) + var(--wat-edge) * 2 + var(--wat-safe-right))}
:root[data-watson-corner=on] body.in-deck .pl-mediation,:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-mediation{right:calc(-1 * (var(--wat-size) + var(--wat-edge) * 2 + var(--wat-safe-right)) + .5rem)}
}
/* Le clavier à l'écran rend la place au champ de saisie : le pied s'efface tant qu'il est ouvert. */
body:has(#app.keyboard-open) .pl-footer{display:none}
body.in-deck :is(.pl-link,.pl-summary),body.in-interaction :is(.pl-link,.pl-summary){min-height:1.75rem}
@media (max-width:999.98px){:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) :is(.pl-link,.pl-summary){min-height:1.75rem}}
/* Téléphone : une seule ligne qui défile sur le côté (le pied garde une hauteur fixe, la bande de Watson aussi) ; le panneau de la mention, fixe, passe au-dessus. */
@media (max-width:540px){
body.in-deck .pl-footer,body.in-interaction .pl-footer,:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-footer{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;gap:0 .9rem;scrollbar-width:none;overscroll-behavior-x:contain}
body.in-deck .pl-footer::-webkit-scrollbar,body.in-interaction .pl-footer::-webkit-scrollbar,:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-footer::-webkit-scrollbar{display:none}
body.in-deck .pl-links,body.in-interaction .pl-links,:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-links{display:contents}
body.in-deck .pl-mediation,body.in-interaction .pl-mediation,:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-mediation{position:fixed;left:.5rem;right:.5rem;bottom:calc(2.25rem + .25rem + var(--wat-safe-bottom,env(safe-area-inset-bottom,0px)));white-space:normal;border-radius:.75rem}
}
@media (max-width:540px){
:root[data-watson-corner=on] body.in-deck .pl-mediation,:root[data-watson-corner=on] body.atelier-scene:not(.in-deck):not(.in-interaction) .pl-mediation{right:.5rem}
}